YouTubeの動画を背景全面に表示する

YouTubeの動画を背景全面に配置するサンプルです。
画面サイズの変更にも対応しています。

YouTubeの制御はJavaScriptで対応していますが、配置はCSSのみで行っています。

サンプルコード

HTML

bodyの閉じタグの直前に動画部分用のタグを挿入します。

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

#backgroundが動画部分になります。
#background-frontが動画の前面に引くレイヤーで、動画をクリックできないようにします。

CSS

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

これで動画の配置対応が完了しました。
　

YouTubeの埋め込み、制御

今回はYouTubeのミュートを行いたかったので、YouTube Player APIを使用しました。
自動再生と動画のループ、コントロールバーなどの非表示だけでしたら、HTMLにiframeを直接埋め込んでパラメータを指定する方法でも問題ありません。

JavaScript

// APIの読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// プレーヤーを埋め込む場所指定
var ytArea = 'background';
// 埋め込むYouTube ID指定
var ytID = '7xlosTiQt2Q';

// プレーヤーの埋め込み
function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		videoId: ytID,
		playerVars: {
			rel: 0,
			controls: 0,
			showinfo: 0,
			wmode: 'transparent'
		},
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
}

// YouTubeの準備完了後
function onPlayerReady(e) {
	ytPlayer.playVideo();
	ytPlayer.mute();
}

// 再生完了後
function onPlayerStateChange(e) {
	var ytStatus = e.target.getPlayerState();
	if (ytStatus == YT.PlayerState.ENDED) {
		ytPlayer.playVideo();
		ytPlayer.mute();
	}
}

YouTubeの動画を背景全面に表示するデモページ
　

【参考サイト】

• スクリプト無し、動画をページの背景いっぱいに表示する方法 | コリス