WEB制作でMVをリッチにキメたいときなど、「Youtube動画を埋め込んで」とURLをぽんと貰うことがよくあります。
Youtube側の仕様もよく変更になることもあり、iframeで埋め込むとロゴが消えない、タイトルが消えない、モバイル端末で自動再生されない……など、まぁ工数ばかり食ってしまうことに。
結局、jQueryプラグイン「jquery.mb.YTPlayer」を使って実装したのでその時のメモです。
目次
公式サイト
GitHub
設置と設定
ダウンロード&格納
上記GitHub、/dist/配下からjquery.mb.YTPlayer.jsあるいはjquery.mb.YTPlayer.min.jsをゲットしてください。その後、適切な場所に格納します。
このページではminの方を使って進めます。
読み込みタグ
headタグ内あるいは閉じbodyタグの直前で読み込みます。
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/jquery.mb.YTPlayer.min.js"></script>CDNで読み込む場合
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/jquery.mb.YTPlayer.min.js"></script>JavaScript
JavaScript? jQuery? ……いずれにせよ、scriptでプラグインが当たるように記述します。ここではdiv#bg-movieに動画を埋め込みたいとします。
デモページでは閉じbodyタグの直前にscriptタグで囲んで配置しています。
$(function(){
$("#bg-movie").YTPlayer();
});YouTube動画
埋め込む動画ですが、ループの確認もしたいので短めのものにしましょう。
皆大好きナミブ砂漠！ 24秒とコンパクトな長さ、実際の動画は音も付いてる、何より映像が美しい。いいですよね〜。
HTML
A: ブロック要素に埋め込む場合
背景に動画を埋め込みたい要素を指定します。div#bg-movieに埋め込みたいとします。div#bg-movieにdata-propertyを付加し、videoURLを指定します。
<div id="bg-movie" data-property="{
videoURL:'https://www.youtube.com/watch?v=K6CnTwqLoj4',
containment: '#bg-movie' //あるいは'self'
}">
</div>B: bodyに埋め込む場合
<body>
<div id="bg-movie" data-property="{
videoURL:'https://www.youtube.com/watch?v=K6CnTwqLoj4',
}">
</div>
</body>この段階では動画指定と動画を埋め込む要素の指定（containmentを指定しないデフォルトの状態ではbodyに動画が埋め込まれます）以外のオプションはすべて無しの状態です。
AとBの例を比べてみて「おや？」と思った方がいるかもしれません。data-propertyを付加して動画を引っ張ってくるdivは、動画を埋め込む要素と同一でなくてもその子要素であれば問題ありません。
コントロールの表示非表示、自動再生やループ再生の有無などなど、実装で指定したいことはdata-propertyの中へオプションを追記することで指定できます。
以下、B: bodyに埋め込む場合のデモページです。
bodyに埋め込む場合のデモページ
音声有り、PCではクリックで動画再生停止、スマホでも動画再生、ページから離れると動画再生停止、コントローラー（現在の再生位置（秒）と動画の長さ）が左上に表示されている、動画の埋め込みはbackground-positionで言うところのcenter,center、background-sizeで言うところのcover、といったことが確認できます。
デフォルトではmuteはされておらず、動画は自動再生される状態なのですが、ブラウザによってはmuteになってないと自動再生されない仕様となっています。
カスタマイズしよう！
プロパティのオプション
素晴らしいことに豊富なオプションが用意されています。
Githubに詳しく記載されていますが、いかんせん英語。ざっと日本語に訳してみます（新しめのオプションは何者か把握できず訳せていません。把握できたら更新します）。
※が付けているのが、使用頻度が高そうなものです。
| プロパティ | 内容 | default | パラメータ |
|---|---|---|---|
| videoURL※必須 | YouTube動画のURL（短縮、IDでもOK） | – | URL |
| mute※ | ミュートするか否か（trueでミュート） | false | true / false |
| showControls※ | YouTubeコントローラの表示非表示 | true | true / false |
| useOnMobile | モバイル端末での閲覧を考慮するか否か | true | true / false |
| mobileFallbackImage | useOnMobileがfalse時、モバイル端末での差し替え画像 | – | 画像のパス |
| coverImage | autoPlayがfalseの場合に表示するサムネイル画像（未設定時は動画最初のフレームが表示） | – | 画像のパス |
| ratio | 動画のアスペクト比（autoの場合はgetDataFromFeedメソッドから取得） | – | ’4/3’, ‘16/9’ or ‘auto’ |
| quality | 動画品質（※このプロパティは非推奨になりました） | ’default’ | ‘default’ / ‘small’ / ‘medium’ / ‘large’ / ‘hd720’ / ‘hd1080’ / ‘highres’ |
| opacity | 動画の透過度 | 1 | 数値（0～1） |
| containment | YouTube動画を埋め込む要素（未設定時はbodyに埋め込まれる） | ‘body’ | セレクタ / ‘self’ / ‘要素のid or class’ |
| loop※ | 動画のループ回数（trueでずっとループ） | true | true / false / 数値 |
| vol | 音量（muteがfalseの場合のみ反映） | – | 数値（1～100） |
| startAt | 動画の再生開始点 | 0 | 数値（秒で指定）（※20?） |
| stopAt | 動画の再生停止点（0で最後まで） | 0 | 数値（秒で指定）（※20?） |
| remember_last_time | ページ遷移した場合の再生時間の設定（※?） | – | true |
| autoPlay※ | 自動再生（端末によってはmute:trueの場合のみ有効） | true | true / false |
| showYTLogo※ | YouTubeロゴと動画リンクの表示非表示 | true | true / false |
| mask | 指定された時間ごとにマスクを表示（※?）（version 3.0から実装） | – | ‘path/to/mask’ or object {0:‘path/to/mask1’, 20:‘path/to/mask2’, …} or false |
| realfullscreen | フルスクリーン再生の可否 | true | true / false |
| stopMovieOnBlur※ | 要素からフォーカスを外した場合に動画を一時停止するか否か | true | true / false |
| playOnlyIfVisible | ページから離れた場合に動画を一時停止するか否か | false | true / false |
| gaTrack | GoogleAnalyticsで動画再生にイベントをしかけているか | true | true / false |
| anchor | ウインドウリサイズ時に動画の位置調整（version 3.0から実装） | ‘center,center’ | (ex: ‘top,right’ or ‘bottom,left’) |
| showAnnotations | YouTubeアノテーションの表示非表示 | false | true / false |
| cc_load_policy | 字幕の表示非表示 | false | true / false |
| abundance | パーセンテージがどうこう | 0.2 (float) | ?? |
| useNoCookie | https://www.youtube-nocookie.comの動画を使ってCookieを取得しない処理 | true | true / false |
| onReady | 動画読み込み完了時に発火させる関数 | – | 任意 |
| onError | エラー時に発火させる関数 | – | 任意 |
アレンジ例
徐々に増やしていきます。
ex01. 特定の要素に背景動画を埋め込む
要はA: ブロック要素に埋め込む場合です。
ここではsection.sec02に埋め込んでみます。オプションはcontainmentを追加しました。
<section class="sec02" style="height: 300px;">
<div id="bg-movie" class="player" data-property="{
videoURL:'https://www.youtube.com/watch?v=K6CnTwqLoj4',
containment: '.sec02',
}"></div>
</section>特定の要素に背景動画を埋め込むデモページ
ex02. 背景動画を半透明にする
単純に半透明にすることはあまり無いかと思うので、動画の上にテキストを載せる想定で。
前述の「ex01. 特定の要素に背景動画を埋め込む」を流用しつつ、section.sec02の背景を黒くし、動画をオプションopacityで半透明にします。
<section class="sec02" style="height: 300px; background: #000;">
<p style="color:#fff; font-size: 2rem;text-align: center;padding-top: 100px;">ダミーテキストダミーテキスト</p>
<div id="bg-movie" class="player" data-property="{
videoURL:'https://www.youtube.com/watch?v=K6CnTwqLoj4',
containment: '.sec02',
opacity: 0.3,
}"></div>
</section>背景動画を半透明にするデモページ
ex03. サムネイル画像を設置する（スマホでも動画を再生させる）
動画データを読み込むまでのタイムラグ、やはりサムネイル画像を表示させておきたいですよね。
autoPlayがfalseの場合はデフォルトで動画最初のフレームがサムネイルとして表示されます。まずはこのデモ。
コントローラーの最初の「P」の文字をクリックすると動画が再生されます。
autoPlay:falseのデモページ
この場合、やはり動画を読み込むまでの間は真っ白の状態ですね。
やはりサムネイル画像は別で設置した方が良さそうです。
キャプチャでサムネイル画像を用意しておき、動画を埋め込む要素に重ねて配置します。onReadyを使って、動画読み込み完了時にその画像を非表示にする処理（classを付加）を発火させます。
<body id="demo-ytplayer05">
（略）
<section class="sec02">
<div id="bg-movie" class="player" data-property="{
videoURL:'https://www.youtube.com/watch?v=K6CnTwqLoj4',
containment: '.sec02',
onReady: function( player ) {
$('.thumb-wrap').addClass('completed');
}
}"></div>
<div class="thumb-wrap"></div>
</section>
（略）
</body>#demo-ytplayer05 .sec02 {
position: relative;
height: 400px;
}
#demo-ytplayer05 .sec02 .thumb-wrap {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("../images/thumb-youtube.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: 1;
transition: 0.3s all;
}
#demo-ytplayer05 .sec02 .thumb-wrap.completed {
visibility: hidden;
}.completedが付加された際の指定、display:none;ではなくvisibility:hidden;を使っているのは、display:none;だとtransitionが効かずフワッと消すことができないからです。keyframeを使う手もあるのですが、ここではシンプルにvisibility:hidden;で対応しました。
サムネイル画像と動画の区別を分かりやすくするために最初のフレームではなくサバンナにいる草食動物の群れを俯瞰している画像をサムネイルに設定しています。
サムネイル画像を設置したデモページ
ex04. サムネイル画像を設置する（スマホでは動画を再生させない）
スマホでは動画を再生させないケースも多いです。重いデータを読み込みたくない人も多いし、そもそもサクサク閲覧したいスマホユーザーが動画が読み込まれるまで待ってくれるか？という問題もありますよね。
useOnMobileをfalseにすることでスマホ端末では動画が再生されなくなります。mobileFallbackImageというスマホ端末での差し替え画像を設定するそのものズバリなオプションもあるのですが、こちら試してみても実装できなかったので、普通にCSSでsection.sec02の擬似要素にbackground-imageを設定しました。
<body id="demo-ytplayer06">
（略）
<section class="sec02">
<div id="bg-movie" class="player" data-property="{
videoURL:'https://www.youtube.com/watch?v=K6CnTwqLoj4',
containment: '.sec02',
useOnMobile: false,
}"></div>
</section>
（略）
</body>#demo-ytplayer06 .sec02 {
position: relative;
height: 400px;
}
#demo-ytplayer06 .sec02::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("../images/thumb-youtube.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}サムネイル画像を設置しスマホでは動画を再生させないデモページ
PC閲覧時でもex03で使ったonReadyが無くてもいい感じですね。。状況次第かな。
ex05. よく設定するオプション
まずはmute: true,、デフォルトで音の出るサイトなんて嫌われますからね。そもそも、muteになってないと自動再生されないブラウザもあります。
showControls: false,、コントローラーを非表示にさせたいという要望も多いです。WEBアクセシビリティ的にはユーザーが停止・再生できる方がいいんですけどね。ま、ディレクター次第です。
showYTLogo: false,でYoutubeのロゴを非表示にするのも多い要望です。
背景で勝手に再生されていてほしい場合など、フォーカス外れるたびに一時停止されるのも困りますよね。そんなときはstopMovieOnBlur: false,を追加します。
ex05にこれらのオプションを追記してみます。CSSは変更無しです。
<body id="demo-ytplayer06">
（略）
<section class="sec02">
<div id="bg-movie" class="player" data-property="{
videoURL:'https://www.youtube.com/watch?v=K6CnTwqLoj4',
containment: '.sec02',
mute: true,
showControls: false,
showYTLogo: false,
stopMovieOnBlur: false,
useOnMobile: false,
}"></div>
</section>
（略）
</body>オプションを増やしたデモページ
