STUDIOのEmbedボックスを活用して、ウェブページのメインビジュアルや背景に動画を設定できます。ただし、STUDIO自体は動画の直接アップロードに対応していませんので、YouTubeやVimeoでアップロードした動画を利用する必要があります。

エディター左の追加パネル内、セクションタブを一番下までスクロールすると背景動画のテンプレートパーツが選択できます。コード内のIDを変えて任意の動画に変更できます。

YouTube動画の利用について

YouTubeは無料で動画をアップロードでき、背景動画としても活用可能です。ただし、いくつかの制約があります。例えば、動画のロード時やマウスホバー時にタイトルや再生バーが表示されること、そしてレスポンシブデザインに柔軟に対応できない点が挙げられます。

さらに、モバイルデバイスでの自動再生は、YouTubeの仕様によって制限されています。STUDIOではこの制約に対応していないため、自動再生はデスクトップ端末でのみ有効です。

Vimeo動画の利用について

Vimeoの有料アカウントを利用すると、背景動画設定において高度なカスタマイズが可能です。例えば、メニューやバナーの非表示設定ができます。有料プランではありますが、よりプロフェッショナルな背景動画の制作が可能です。

※背景としてVimeo動画を非表示で埋め込むには、有料プランでのみ利用可能な [?background=1] パラメータが必要です。

STUDIOでの設定手順

1. Embedボックスを配置

エディター上で、Embedボックスをドラッグ＆ドロップして配置します。選択枠左上にある青色の<iframe>をクリックし、設定を開きます。

2. 埋め込みコードを追加

以下のコードを埋め込みコード欄へコピーしペーストしてください。

Youtubeの場合

<iframe width="560" height="315" src="https://www.youtube.com/embed/【ID】?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1&amp;playlist=【ID】&amp;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>