背景動画を設定する

Studioでは、Embedボックスを使ってメインビジュアルや背景に動画を表示することができます。動画を埋め込むことで、世界観やブランドイメージの視覚的な訴求に役立てることができます。

現在、動画の直接アップロードには対応していません。YouTubeやVimeoにアップロードした動画の埋め込みコードを使って埋め込む必要があります。

注意：音声付き動画の自動再生とブラウザ制限について

YouTubeやVimeoの動画を音声ありで自動再生する場合、ブラウザ側のポリシーによって制限されることがあります。

例えばChromeブラウザでは、音声付き自動再生には特定の条件が必要で、条件を満たさない場合は、コードに autoplay=1&muted=0 などのパラメータを付けても、音声は再生されません。

参照：

代替え案
ブラウザの制限をStudio側で回避することはできませんが、以下の2つの方法を検討できます。

音声なし（ミュート）で自動再生する
自動再生を設定せず、再生バーを表示して訪問者が手動で再生できるようにする

YouTube動画の利用について

YouTube動画の利用にはいくつかの制約があります。

動画のロード時やマウスホバー時にタイトルや再生バーが表示される
モバイルデバイスでの自動再生はYouTubeの仕様により制限される（デスクトップのみ有効）

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>