ページ背景に動画を再生させる

背景動画設定はYouTube動画をサイトのページ背景に設定できる機能です。ページを表示させた後、設定した動画が自動的に再生されるため、インパクトのあるサイトを作成することができます。

背景動画機能はページ全体(背面)・ヘッダ・ビルボード・コンテンツ・メイン・サイドA・サイドB・フッタの各エリアに設定できます。また、背景ストレッチ機能をご利用いただくことで背景に動画を100%表示することができます。

スマートフォンでサイトを閲覧する場合、背景動画部分は静止画として表示されます。

ページデザインを開く

サイトエディタの〈設定〉アイコンをクリックしてプロパティ設定を開きます。〈ページ設定〉を選んで[1]、〈ページデザイン〉をクリックします[2]。

ページ背景に動画を再生させる

背景動画を設定する

背景動画を設定するには、まず対象エリアのチェックボックスをオンにします[1]。その右側の細長いボタンをクリックし[2]、〈動画URLを指定〉を選択します[3]。

ページ背景に動画を再生させる

動画を設定する

貼りつけたいYouTubeの動画ページのURLを入力します[1]。あらかじめWebブラウザで動画のページにアクセスし、そのURLをコピー&ペーストすると正確に入力できます。
ミュートとループの設定を行います[2]。動画ページの音声を消す場合はミュートにチェックを付け、繰り返し再生する場合はループにチェックを付けます。

また、動画が読み込まれるまで画像を表示することができます。「読み込まれるまでに表示する画像」の〈画像ファイルを選択〉をクリックします[3]。
ページ背景に動画を再生させる

表示したい画像を選択します。ここでは、〈写真〉をクリックし[1]、表示したい画像を選び[2]〈選択〉をクリックします[3]。
ページ背景に動画を再生させる

設定が完了したら、〈OK〉をクリックします。

ページ背景に動画を再生させる

動画は公開設定になっていないと使用できません。動画を公開にするには「動画のプライバシー設定の変更」をご覧ください。
また、短縮URLやURLのトップが「https」となっているURLはご利用いただけません。httpに直し、ご利用ください。
※YouTube動画の上にマウスカーソルをあわせ、右クリックして動画のURLをコピーをすると、その動画の正式なURLが取得できます。

ページ設定に戻りますので、〈適用〉をクリックします。

以上です。
サイトエディタでは背景動画は再生されませんので、プレビューボタンで確認するようにしましょう。