jquery.mb.YTPlayer を使って YouTube 動画を背景表示する
環境によって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();
});