メインコンテンツにスキップ
Vimeo動画を埋め込む

Vimeoに公開した動画を埋め込む方法

Saika avatar
対応者:Saika
今週アップデートされました

Vimeo動画の埋め込み

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

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

Vimeo動画の利用について

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

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

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

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

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

参照:

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

  1. 音声なし(ミュート)で自動再生する

  2. 自動再生を設定せず、再生バーを表示して訪問者が手動で再生できるようにする

設定手順

  1. エディタ左側の追加ボックス内、埋め込みメニューからVimeo動画のEmbedボックスを追加します

  2. Embedボックスを選択したまま、設定パネルを開き、下記形式のVimeo再生ページのURLを入力します

    https://vimeo.com/xxxx

自動&ループ再生させる

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

下記のコードの【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>

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

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

<iframe src="https://player.vimeo.com/video/【ID】?autoplay=1&loop=1&muted=1"width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>

関連記事

video play mp4 mov

ビデオ ムービー

こちらの回答で解決しましたか?