Vimeoの動画を埋め込む

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

Tips：mp4やwebm形式の動画（各ファイル1GBまで）をエディタにアップロードして、ページ上に直接配置することもできます。

Vimeo動画の利用について

Vimeoの有料アカウントを利用すると、メニューやバナーの非表示設定などのカスタマイズが可能です。

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

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

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

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

参照：

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

(1)で配置したYouTubeボックス（Embedボックス）を選択します。
右パネル上で[埋め込み]タブを選択します。右パネルが閉じている場合は開いてください。
[動画URL]の入力欄に入っているURLを削除し、Vimeoの再生ページでコピーしたURLを貼り付けます。（例：https://vimeo.com/xxxx）
ライブプレビューURLを開き、動作確認を行います。
公開済みのサイトを編集していた場合は、サイトを更新します。更新するまで、変更内容は反映されません。投稿内容がエディタ上に反映されない場合、ブラウザの更新（リロード）をしてください。

代表的なカスタマイズ例として、動画を自動再生＆ループ再生させる埋め込みコードの形式を紹介します。

下記のコードの【ID】の部分を、埋め込みたい動画のID（URLのvimeo.com/xxxxの部分）に置き換えます。
<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>
[埋め込みコード]欄の[エディタを開く]をクリックします。
[埋め込みコードを編集]画面の左側で、もともと入っている文字を削除し、1でコピーしたコード貼り付けて[保存]します。
公開済みのサイトを編集していた場合は、サイトを更新します。更新するまで、変更内容は反映されません。投稿内容がエディタ上に反映されない場合、ブラウザの更新（リロード）をしてください。

自動再生のパラメータが存在する場合、Vimeoのプレーヤーは自動的に再生を開始します。ただし一部のブラウザでは自動再生がブロックされることがあります。

上記コード内の [?background=1] パラメータは有料プランでのみ利用できます。有料プランをご利用でない場合は、こちらをご活用ください。