対象プラン：全プラン
動画の埋め込み方法
Embedボックスを使ってメインビジュアルや背景にYouTubeやVimeoにアップロードした動画を埋め込むことができます。動画を埋め込むことで、世界観やブランドイメージの視覚的な訴求に役立てることができます。
この記事では、YouTubeとVimeoにアップロードした動画の埋め込み手順をご紹介します。
注意：
現在、動画の直接アップロードには対応していません。
音声付き動画の自動再生とブラウザ制限について
YouTubeやVimeoの動画を「音声あり」で自動再生する場合、ブラウザ側のポリシーによって制限されることがあります。
例えばChromeブラウザでは、音声付き自動再生には特定の条件が必要です。条件を満たしていない場合、コードに
autoplay=1&muted=0などのパラメータを付けても音声は再生されません。
代替え案
ブラウザの制限をStudio側で回避することはできませんが、以下の2つの方法が検討できます。
音声なし（ミュート）で自動再生する
自動再生を設定せず、再生バーを表示して訪問者が手動で再生できるようにする
参照：
YouTube動画の利用について
YouTube動画の利用にはいくつかの制約があります。あらかじめご理解の上、ご利用ください。
動画のロード時やマウスホバー時にタイトルや再生バーが表示される
モバイルデバイスでの自動再生はYouTubeの仕様により制限される（デスクトップのみ有効）
Vimeo動画の利用について
背景としてVimeo動画を非表示で埋め込むには、Vimeoの有料プランでのみ利用可能な [?background=1] パラメータが必要です。
Vimeoの有料アカウントを利用すると他にも、メニューやバナーの非表示設定などのカスタマイズが可能です。
Tips：追加パネルから、背景動画のセクションパーツもご利用いただけます。埋め込みコードやデザイン編集を行うことでカスタマイズが可能です。
設定手順
1. Embedボックスを配置
エディタ左側の追加パネルを開きます。
ボックスメニューから、Embedボックスをドラッグ＆ドロップしてページへ配置します。
ボックス左上にある青色の[<iframe>]をクリックして設定を開きます。
2. 埋め込みコードを追加
画面右側の設定パネルを開きます。
以下のコードを埋め込みコード欄へコピー&ペーストしてください。
Youtubeの場合 ：
<iframe width="560" height="315" src="https://www.youtube.com/embed/【ID】?rel=0&controls=0&showinfo=0&autoplay=1&loop=1&playlist=【ID】&mute=true" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Vimeoの場合 ：
<iframe src="https://player.vimeo.com/video/【ID】?autoplay=1&loop=1&background=1"width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>
3. 配置したい動画のIDを取得
YouTubeまたはVimeoのIDを取得します。
YouTubeの場合：
https://www.youtube.com/watch?v= 以降の文字列がIDです。
Vimeoの場合：
https://vimeo.com/manage/videos/以降の文字列がIDです。
4. 取得したIDを設定
Studioエディタへ戻ります。
先程コピーしたIDをコード内にある【ID】のところにペーストしてください。 これで動画の設定は完了です。IDは動画ごとに異なるため、必ず設定したい動画のIDを使用してください。
Youtubeの場合：
Vimeoの場合：
5. 余白の調整
動画埋め込みボックスを配置した場合、デフォルトの設定だと上下か左右に余白が生じることがあります。動画の余白は、Embedボックスの幅を変更することで調整できます。
Embedボックスを選択します。
画面上部のスタイルバーから[横幅]を200%、[縦幅]を110vhに設定します。
注意：
幅を調整しても一定以上の画面幅を超えると、左右や上下に余白が生じることがあります。その場合は、縦幅を110vhからさらに大きくすると緩和できます。ただし、縦幅を大きくするとその分動画が拡大されて表示されます。
背景動画は利用するYoutubeやVimeo側の仕様も大きく影響するため、一定の画面幅以上になるとどうしても余白が発生してしまう可能性があります。
6. 背景動画の上に要素を配置する
ページに配置したEmbedボックスを選択します。
右クリックメニューから[グループ化]もしくはショートカットキー⌘ + Gで、選択している要素をグループ化します。
グループ内にテキストボックスを追加します。
テキストボックスの配置を絶対配置に変更して位置を調整します。
