環境によってCORSエラーが出る場合は別途対処が必要です。
YouTubeでは無く、MP4+video タグによる背景動画の方法もこちらでご紹介しています。

jQuery プラグイン「jquery.mb.YTPlayer」を使用すると YouTube 動画を手っ取り早くWebサイトに背景として表示させることができます。
デモでは上にロゴを重ねています。

※動画は「大阪の夜景動画チャンネル Night Movie Channel of Osaka Japan」様から拝借

とりあえずコード全部

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>【デモ】jquery.mb.YTPlayer を使って YouTube 動画を背景表示する</title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<div class="movie-wrapper">
		<div class="movie">
			<img src="./images/logo.svg" alt="ロゴ">
			<div id="js-movie" class="player" data-property="{
				videoURL:'https://youtu.be/7wWhwiwBJRQ',
				containment: '.movie',
				autoPlay:true,
				mute:true,
				startAt:10,
				opacity:1,
				showControls:false,
				stopMovieOnBlur: false,
				loop: true,
			}">
			</div>
		</div>
	</div>
	<script
	src="https://code.jquery.com/jquery-2.2.4.min.js"
	integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
	crossorigin="anonymous"></script>
	<script src="./js/jquery.mb.YTPlayer.min.js"></script>
	<script src="./js/script.js"></script>
</body>
</html>

script.js

$(function() {
	$('#js-movie').YTPlayer();
});

CSS

* {
	margin: 0;
	padding: 0;
}
.movie-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.movie{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.movie img{
	max-width: 25%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 100;
}

導入ステップ

1. jQuery と jquery.mb.YTPlayer.min.js を読み込む

HTMLファイルに読み込みます。

jQuery は CDN を利用しています。
jquery.mb.YTPlayer.min.js は Github からダウンロードし、/dist/ 配下の「jquery.mb.YTPlayer.min.js」を読み込みます。

<body>

...
	<script
	src="https://code.jquery.com/jquery-2.2.4.min.js"
	integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
	crossorigin="anonymous"></script>
	<script src="./js/jquery.mb.YTPlayer.min.js"></script>
</body>

2. HTMLで動画の呼び出し部分を記述する

<div class="movie-wrapper">
	<div class="movie">
		<img src="./images/logo.svg" alt="ロゴ">
		<div id="js-movie" class="player" data-property="{
			videoURL:'https://youtu.be/7wWhwiwBJRQ', //YouTube 埋め込みコード
			containment: '.movie', //動画コンテナ―
			autoPlay:true, //自動で再生するか
			mute:true, //音を消すか
			startAt:10, //動画の何秒から再生するか
			opacity:1, //透過
			showControls:false, //コントロール類の表示
			showYTLogo: false, //YouTubeのロゴや再生時間
			stopMovieOnBlur: false, // 操作中も動画続行
			loop: true, //ループさせる
		}">
		</div>
	</div>
</div>

3. CSS(スタイルシート)を記述する

動画の縦横比率をキープしつつレスポンシブで表示、ロゴは中央に配置しています。

* {
	margin: 0;
	padding: 0;
}
.movie-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.movie{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.movie img{
	max-width: 25%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 100;
}

もし動画をトリミングして少し縦長で表示したい場合(例えばスマートフォンなどで)は .movie-wrapper にネガティブマージンを指定してください。

.movie-wrapper {
	position: relative;
	margin-right: -20%;
	margin-left: -20%;

}

4. script.js を作成して読みこむ

<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="./js/jquery.mb.YTPlayer.min.js"></script>
<script src="./js/script.js"></script> //←追加

script.js

$(function() {
	$('#js-movie').YTPlayer();
});

コメントを残す

メールアドレスが公開されることはありません。