この記事では、YouTubeとVimeoにアップロードした動画の埋め込み手順をご紹介します。
埋め込み動画を利用する注意点
(1)YouTube動画の利用について
YouTube動画の利用にはいくつかの制約があります。あらかじめご理解の上ご利用ください。
動画のロード時やマウスホバー時にタイトルや再生バーが表示される
モバイルデバイスでの自動再生はYouTubeの仕様により制限される（デスクトップのみ有効）
(2)Vimeo動画の利用について
背景としてVimeo動画を非表示で埋め込むには、Vimeoの有料プランでのみ利用可能な [?background=1] パラメータが必要です。Vimeoの有料アカウントを利用すると他にも、メニューやバナーの非表示設定などのカスタマイズが可能です。
(3)音声付き動画の自動再生とブラウザ制限について
YouTubeやVimeoの動画を「音声あり」で自動再生する場合、ブラウザ側のポリシーによって制限されることがあります。例えばChromeブラウザでは、音声付き自動再生には特定の条件が必要です。条件を満たしていない場合、コードに autoplay=1&muted=0 などのパラメータを付けても音声は再生されません。
代替案
ブラウザの制限をStudio側で回避することはできませんが、以下の2つの方法が検討できます。
音声なし（ミュート）で自動再生する
自動再生を設定せず、再生バーを表示して訪問者が手動で再生できるようにする
参照：
外部サービスの背景動画の設置手順
(1) Studioに埋め込みボックスを設置する
スクリーン上に、Embed（埋め込み）ボックスを追加します。
ナビゲーションで追加アイコンをクリックします。
[基本]タブをクリックします。
[埋め込み]セクションから[Blank]の埋め込みボックスをクリックします。
埋め込みボックスがスクリーン上に配置されます。
(2) 埋め込みボックスにコードを入力する
埋め込みボックスをクリックします。
右パネル上で[埋め込み]タブを選択します。右パネルが閉じている場合は開いてください。
[埋め込みコード]の入力フィールド内で[エディタを開く]をクリックします。
[埋め込みコードを編集]画面の左側に表示される編集画面で、もともと入っている文字を削除し、以下のコードを貼り付けて[保存]します。【ID】にあたる文字列は、次の手順で取得します。
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を取得する
埋め込みたい動画にアクセスし、IDを取得します。
YouTubeの場合：
https://www.youtube.com/watch?v= 以降の文字列がIDです。
Vimeoの場合：
https://vimeo.com/manage/videos/以降の文字列がIDです。
(4). 取得したIDを設定する
Studioエディタへ戻ります。
(3)でコピーしたIDを、コード内にある【ID】のところにペーストします。
公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。
Youtubeの場合：
Vimeoの場合：
埋め込んだ動画のレイアウト調整
埋め込んだボックスの余白設定や、文字を固定して重ねる方法を説明します。
(1)余白を調整する
動画埋め込みボックスを配置した場合、デフォルトの設定だと上下や左右に余白が生じることがあります。動画の余白は、Embedボックスの幅を変更することで調整できます。
Embedボックスを選択します。
右パネルで[ボックス]タブを選択します。
※パネルが閉じている場合は、右パネルを開いてください。
[レイアウト]メニューで、以下の設定をします。
・[幅] 200%
・[縦幅]110vh
注意：
幅を調整しても、一定以上の画面幅を超えると左右や上下に余白が生じることがあります。その場合は、縦幅を110vhからさらに大きくすると緩和できます。ただし、縦幅を大きくするとその分動画が拡大されて表示されます。
背景動画は、YoutubeやVimeo側の仕様も大きく影響するため、一定の画面幅以上になるとどうしても余白が発生してしまう可能性があります。
(2)背景動画の上に、位置固定要素を配置する
ページに配置したEmbedボックスを選択します。
選択したEmbedボックスを選択します。
・右クリックメニューから[グループ化]
・またはショートカットキー⌘ + G
同グループ内にテキストボックスを追加します。
テキストボックスの配置を絶対配置に変更して位置を調整します。