Studioで背景動画を設定する方法PADDLE Pilates（制作会社：株式会社LEARNED）このように、メインビジュアルの背景に動画を流すWebサイトの作り方を解説します。まず、Studioに直接動画ファイル（mp4やmov形式など）をアップロードすることはできません。Studioでは、YouTubeやVimeoなどの外部動画プラットフォームにアップロードされた動画のみ埋め込むことができます。詳細については、Studio公式サイトをご確認ください。外部動画プラットフォームの動画を埋め込む方法Studioを活用すれば、以下の4ステップで簡単にYouTubeやVimeoの動画を配置し、背景動画を埋め込むことができます。1. YouTubeまたはVimeoから埋め込みコードを取得埋め込みたい動画の「共有」ボタンをクリック。「埋め込む」を選択し、表示された埋め込みコードをコピー。2. Studioのデザインエディタで埋め込みパーツを追加Studioの左パネルから「追加」→「ボックス」→「Embed」→「YouTube」または「Vimeo」を選択し、キャンバス内にドラッグ＆ドロップ。3. 埋め込みパーツの設定パネルを開く配置したYouTubeまたはVimeoの埋め込みパーツをクリックし、右側の設定パネルを表示します。4. 埋め込みコードをペースト設定パネルの「埋め込みコード」欄に、先ほどコピーしたコードを貼り付ける。この4ステップで、サイトへのYouTubeやVimeoの動画埋め込みが完了します。自動再生やループ再生の設定については、こちらをご覧ください。Studioで背景動画を埋め込む際の注意点YouTube動画を埋め込むと、ロード時やマウスホバー時にYoutubeのロゴや再生バーが表示されるため、デザインの一貫性が損なわれることがあります。高栄建設（制作：今稜輔）この問題を解決するには、Vimeoの有料プランを活用するのがおすすめです。Vimeoの有料プランでは、?background=1 パラメータを設定することで、UIを非表示にして動画を埋め込むことが可能になります。プランは「Starter」「Standard」「Advanced」の3種類があり、基本的な機能を使うならStarterプランで十分です。料金は年払いの場合、月額1,200円となります。Vimeoの有料プランには、細かいプライバシー設定が可能という大きなメリットがあります。具体的には、パスワードによる公開制限や、指定ドメインのみでの動画再生許可などの設定ができ、コンテンツの保護という点ではYouTubeより優れています。特に、セキュリティを重視し、背景動画の無断使用を防ぎたい場合には最適な選択肢です。一方で、背景動画のデザインが白ベースの場合は、YouTubeのタイトルや再生バーが目立ちにくいため、気にならないケースもあります。そのため、デザインの統一感やセキュリティを重視するならVimeoの有料プラン、コストを抑えたいならYouTubeの利用がおすすめです。背景動画を活用したメインビジュアルをさらに魅力的にする4つのステップPADDLE Pilates（制作会社：株式会社LEARNED）メインビジュアルでは、背景動画の上に企業名やキャッチコピーなどを配置することが多いです。ここでは、その具体的な設定方法を解説します。1 . 背景として動画を配置するEmbedボックスの重ね順（z-index）を「-1」に設定し、背景として扱う2 . 親ボックスを作成背景動画とテキスト・ボタンをまとめるための親ボックスを作成。その中にEmbedボックス（背景動画）と他の要素を配置3 . 要素を配置動画の上に配置したい要素（テキストやボタン）を親ボックス内に追加。各要素の「位置」を絶対位置に設定し、適切な場所に配置4 . レイアウト調整横幅・縦幅、パディングやマージンを調整し、デザインのバランスを調整。背景動画の上に要素を配置する具体的な方法はこちらStudioでの背景動画をレスポンシブで表示させる方法レスポンシブ対応で比率を崩さず、動画をきれいに表示させる方法を解説します。親ボックスを作成動画の縦横比と同じ比率の画像を用意。画像のタイプはimgを選択し、幅を100%、縦をautoに設定して配置。親ボックスの中に、絶対配置でEmbedボックスを配置。このとき、top: 0、left: 0、right: 0、bottom: 0に指定。Embedボックスのレスポンシブ対応について、詳しくはStudio公式サイトをご覧ください。