まず、動画をどこに置くか
いちばん多いのはYouTube。無料で、容量も気にせず置けます。ただ、再生が終わると関連動画が出ますし、ページのソースを見れば動画のURLも分かります。
Vimeoは広告が出ず、プレイヤーの見た目も整えやすいので、会社や作品のサイトでよく使われます。有料プラン（Free・Basic以外）なら、埋め込めるサイトを自分のドメインに絞れます。
動画ファイルをサーバーに置いて、HTMLのvideoタグで流す方法もあります。外部サービスには頼りませんが、再生されるたびにサーバーの転送量を使いますし、ファイルそのものを保存されやすい形です。数十秒の背景動画くらいなら、これで十分です。
やることは3つだけ
YouTubeなら、動画の下の「共有」から「埋め込む」。Vimeoなら、動画の設定画面の右上にある「Share」から「Embed」。どちらも<iframe>で始まる1行のコードが出てくるので、コピーします。
あとは、サイトの「HTMLを貼れる欄」に貼るだけです。この欄の名前と場所が、サイトを作っているサービスごとに違います。
サイト別、貼る場所
WordPress
ブロックエディターで「カスタムHTML」ブロックを追加して、コードを貼ります。YouTubeやVimeoなら、段落にURLを1行だけ貼っても、自動でプレイヤーに変わります。
クラシックエディターなら「テキスト」タブに切り替えてから貼ります。「ビジュアル」タブに貼ると、コードがそのまま文字で出てしまいます。
STUDIO
追加パネルの「Basic」タブにある「Embed」から、空のEmbedボックス（Blank）を置き、右パネルの「Embed」タブにコードを貼ります。 コードが<iframe>だけなら、STUDIOがiframeとしてそのまま扱います。それ以外のコードは「sandbox」という形になり、一部の機能が制限されることがあります。
Wix
エディターの「パーツを追加」から「埋め込みコード」を開き、「HTML 埋め込み」を置きます。「コードを入力」にiframeのコードを貼って「適用」。 URLだけを入れる「サイトの埋め込み」もあります。どちらも、表示されるのは「https」で始まるコードとURLだけです。
Notion
ページで「/embed」と打って「埋め込み」を選び、動画のURLを貼ります。Notionが受け付けるのはURLで、iframeのコードを貼る欄はありません。 YouTubeやVimeoのURLなら、たいていそのまま埋め込まれます。埋め込みを許可していないサイトのURLは「読み込みに失敗しました」と表示されます。
HTMLを直接書いている場合
動画を出したい位置に、コピーしたコードをそのまま貼ります。ブログサービスの「HTML編集」モードも同じです。
スマホで動画がはみ出すとき
コピーしたコードには、たいていwidth="560" height="315"のように、ピクセルでサイズが入っています。パソコンでは問題なくても、スマホでは画面からはみ出します。
widthとheightを消して、かわりに次のstyleを入れると、幅は画面に合わせて、高さは16:9で決まります。
<iframe src="（コピーしたコードのsrcのまま）"
style="width:100%;aspect-ratio:16/9;border:0"
allowfullscreen></iframe>Wixは、ヘルプでも幅と高さを100%にするよう案内しています。STUDIOには、Embedボックスを画面幅に合わせるための説明がヘルプにあります。
うまく表示されないとき
| 症状 | よくある原因 | 直し方 |
|---|---|---|
| コードがそのまま文字で出る | 文章を書く欄に貼っている | WordPressは「カスタムHTML」ブロック、クラシックエディターは「テキスト」タブに貼り直す |
| 「この動画は埋め込みできません」と出る | 動画側で埋め込みを止めている | YouTubeはYouTube Studioの動画の詳細で「埋め込みを許可する」をオンに。Vimeoは「Where can this be embedded」の設定を確認 |
| 自分のサイトだけ表示されない（Vimeo） | 埋め込めるドメインに、自分のサイトが入っていない | 「Specific domains」に自分のドメインを追加する |
| Wixで何も表示されない | コードやURLが「http」で始まっている | 「https」で始まるコードに差し替える |
| 保存すると埋め込みが消える（WordPress） | 投稿者・寄稿者の権限ではiframeを保存できない | 管理者か編集者の権限で貼る |
埋め込んだ動画を、有料で見せたいとき
YouTubeの限定公開やVimeoの埋め込みは、「見せる」ための仕組みです。埋め込んだページのソースには動画のURLが入っているので、URLさえ分かれば、ページの外でも見られます。有料で見せたい動画には向きません（くわしくはYouTubeの限定公開で動画を販売するときの問題点）。
Rootioは、無料プレビューと決済が入ったプレイヤーを、同じように埋め込みコードで貼るサービスです。購入していない人は、URLを知っていてもプレビューの先は見られません。貼り方はこの記事と同じで、違いは次の2つだけです。
- 貼り付ける先のドメイン（例：example.com）を、先にRootioで「埋め込み許可ドメイン」に登録します。登録していないサイトでは再生されません。
- URLしか入れられない場所向けに、動画ごとの「埋め込みURL」と「シェアURL」も用意しています。WixのようにURL欄しかない場合は前者、NotionやSNSには後者を使います。
WordPressでの手順はWordPressで動画を有料販売する手順に、売り方そのものの選び方は個人で動画を販売する方法と販売サイトの選び方にまとめています。