【Studio初心者ガイド】背景動画の設定方法(YouTube・Vimeo使用)｜Editor 5.0対応

※本記事は Studioの「Editor 5.0」に対応しています。

Studioを使って魅力的な背景動画を設定し、サイトに動きとインパクトをプラスしてみませんか？

本記事では、YouTubeとVimeoを活用した背景動画の設定方法を初心者向けにわかりやすく解説します。

動画を埋め込むことで、ブランドイメージやメッセージを効果的に伝え、訪問者の視覚的な興味を引きつけるサイト作りが可能です。

Studioでの設定手順からブラウザの自動再生に関する注意点まで、ポイントを押さえた内容で初めての方でも簡単に背景動画を設定できるようにサポートします。

動画ファイルを直接アップロードをして背景動画として使用することも可能です。
動画ボックスについてはこちら

背景動画を設定するメリット

背景動画は、Webサイトにインパクトと動きをもたらし、訪問者に独自のブランドイメージを伝えるための重要な要素です。

動画を背景に配置することで、静的なデザインにはない視覚的な魅力を引き出すことができ、訪問者の関心を引きつける効果があります。

特に、企業のメインビジュアルやコンセプトを伝えたいページでは、背景動画を取り入れることで瞬時にメッセージを訴求する力が増します。

Studioで背景動画を設定するには、YouTubeやVimeoにアップロードした動画の埋め込みコードを使用します。

以下の手順に沿って、背景動画を簡単に設定してみましょう。

エディタ左側の「追加」を開き、「埋め込み」カテゴリ内（赤四角）にある要素を、動画を表示させたいエリアに配置します。

配置した埋め込み要素を選択すると設定パネルが表示されるので、「エディタを開く」をクリックして、埋め込みコードの入力欄（赤四角）にコードを追加します。

YouTubeは無料で埋め込みが可能ですが、機能や表示にいくつか制限があります。一方、Vimeoは設定やカスタマイズの自由度が高く、美しい表示が可能ですが、有料サービスとなっています。

YouTubeの埋め込みコードは以下です。後程、【ID】の部分に取得したIDを入れていきます。

YouTubeの動画IDは、動画URLの中に含まれている英数字の部分です。以下の手順で簡単に取得できます。

YouTubeで使用したい動画を開き、そのURLを確認します。URLは通常、次のような形式です。https://www.youtube.com/watch?v=動画ID
v=の後に続く文字列が動画ID（ピンク四角）です。例えば、https://www.youtube.com/watch?v=abc123xyz というURLの場合、動画IDは abc123xyz となります。
このIDをコピーし、先ほどの埋め込みコード内の【ID】部分に貼り付けてください。

これで、YouTube動画の埋め込み設定は完了です。

Vimeoの埋め込みコードは以下です。後程、【ID】の部分に取得したIDを入れていきます。

埋め込みコードをStudioの埋め込みコード欄に貼り付けたら、次の手順で、動画IDの取得しします。

Vimeoの動画IDも、URLの中に含まれている数字の部分です。Vimeoの場合、IDは数値のみで構成されています。

Vimeoで使用したい動画を開き、そのURLを確認します。URLは通常、次のような形式です。https://vimeo.com/動画ID
/の後に続く数字が動画IDとなります。例えば、https://vimeo.com/123456789というURLの場合、動画IDは 123456789 です。
このIDをコピーし、埋め込みコード内の【ID】部分に貼り付けてください。

以上で、Vimeo動画の埋め込み設定は完了です。

この動画IDと埋め込みコードを設定することで、YouTubeやVimeoの動画をStudioの背景動画として表示できるようになります。

YouTubeを背景動画として使用する場合、いくつかの仕様上の制約が存在します。背景動画として視覚的に美しい表示を目指すには、こうした制約を理解し、可能な限り対応することが重要です。ここでは、YouTube動画を背景として使用する際の主な注意点について解説します。

タイトルの表示
YouTube動画をロードする際、動画のタイトルやチャネル名が数秒間表示されることがあります。これは埋め込み動画の特徴であり、完全に非表示にする方法は提供されていません。
再生バーの表示
ユーザーが動画上にマウスをホバーすると、YouTubeの再生バーが自動的に表示されます。これにより、再生ボタンや音量調整などのコントロールが表示され、視覚的な一体感が崩れる可能性があります。

これらの表示を完全に取り除くことはできません、完全な非表示を希望する場合は、Vimeoの有料プランを検討するのも良い選択肢です。

YouTube動画の自動再生は、モバイルデバイスにおいて制限される場合があります。

モバイル端末での制限
モバイルデバイスでは、ユーザーのバッテリー消耗を抑えるため、自動再生が一部制限されます。このため、モバイル上ではユーザーが手動で再生ボタンをタップしなければ動画が再生されない場合があります。
ブラウザとOSの違いによる挙動
モバイルブラウザやOSによっても挙動が異なるため、すべての環境での一貫した自動再生は保証されません。特に、iOSデバイス（iPhoneやiPad）では、自動再生が厳しく制限されることが多く、通常はミュート状態での自動再生のみが許可されます。

背景動画としてYouTubeを使用する場合、特にモバイルでの制限を理解し、訪問者にストレスを感じさせないデザインや設定が重要です。