Vimeoで背景動画を実装する

Vimeoで背景動画を実装できるかどうかを調べる機会があったのでメモ。

サンプルコード

APIを使用するためにjsファイルを読み込ませます。

<script src="https://player.vimeo.com/api/player.js"></script>

Vimeoを埋め込むエリアを用意します。

HTML

<div id="background"></div>
<div id="background-front"></div>

backgroundにVimeoを埋め込み、background-frontをプレーヤーの前面に配置してクリックできないようにする想定です。

CSSで背面に固定配置します。

CSS

#background,
#background-front {
    position: fixed;
    right: 0; 
    bottom: 0;
	width: 100%;
	height: 100%;
    z-index: -1;
}
#background iframe {
	width: 100%;
	height: 100%;
}

次にVimeoの設定ですが、Plus / PRO / Businessのプランの場合、背景動画の埋め込みのオプションを使用できるようです。
参考:背景動画の埋め込み

JavaScript

// 埋め込む動画のオプション
var options = {
	id: 59777392, // Vimeo ID
	background: 1 // 背景動画埋め込みの設定
};
 
// プレーヤーの設置
var player = new Vimeo.Player('background', options);

背景動画として埋め込むことができました。
背景動画埋め込みのデモページ
iOS11の端末で確認しても問題なさそうでした。

別の方法として、オプションを設定することでも近い対応ができるようです。
Basicプランの場合はこちらになります。

JavaScript

// 埋め込む動画のオプション
var options = {
	id: 59777392, // Vimeo ID
	autoplay: true, // 自動再生するかどうか設定
	loop: true, // ループするかどうか設定
	muted: true // ミュートにするかどうか設定
};

// プレーヤーの設置
var player = new Vimeo.Player('background', options);

backgroundの代わりにautoplay / loop / mutedを設定しています。
これでも背景動画として埋め込むことはできますが、再生開始から数秒間は動画の再生ボタンなどのUIが表示されてしまうようです。
背景動画埋め込みのデモページ2
　

他にVimeoを埋め込む場合の対応

Vimeoは同一ページ内に複数のプレーヤーを埋め込んでいる場合、再生中に別のプレーヤーを再生すると現在のプレーヤーを一時停止するようになっています。
ただ今回のような背景動画の場合、別のプレーヤー再生時は一時停止をしたくないので対応を行ってみます。

まずbackgroundのオプションで設定した場合ですが、特に設定を行わなくても自動で対応されるようです。

HTML

<div id="background"></div>
<div id="background-front"></div>
<div class="contents">
	<div id="player" data-vimeo-id="76979871"></div>
</div>

JavaScript

// 埋め込む動画のオプション
var options = {
	id: 59777392, // Vimeo ID
	background: 1 // 背景動画埋め込みの設定
};
 
// プレーヤーの設置
var player = new Vimeo.Player('background', options);

特に設定を変更していませんが、コンテンツ内のVimeoを再生しても背景動画は一時停止しませんでした。
同一ページ内に複数プレーヤーがある場合のデモページ

次にautoplay / loop / mutedで設定する場合ですが、別のプレーヤーを再生すると背景動画が停止してしまったのでオプションを追加します。

JavaScript

// 埋め込む動画のオプション
var options = {
	id: 59777392, // Vimeo ID
	autoplay: true, // 自動再生するかどうか設定
	loop: true, // ループするかどうか設定
	muted: true, // ミュートにするかどうか設定
	autopause: false // ほかのプレーヤーを再生したときに、このプレーヤーを一時停止にするかどうか設定
};

// プレーヤーの設置
var player = new Vimeo.Player('background', options);

これでコンテンツ内のVimeoを再生しても背景動画は一時停止されなくなりました。
同一ページ内に複数プレーヤーがある場合のデモページ2

【参考サイト】

• 背景動画の埋め込み – ヘルプセンター
• GitHub – vimeo/player.js: Interact with and control an embedded Vimeo Player.