jquery.mb.YTPlayer
このjQueryプラグインを使えば結構簡単に出来る。ダウンロードは以下のサイトから。
jquery.mb.YTPlayer.min.jsを設置
ダウンロードしたZIPファイルを解凍し「dist」内のjquery.mb.YTPlayer.min.jsをコピーし、該当ディレクトリ内に設置。以下の例は「js」ディレクトリ内に設置した例。head内などお好きなところに設置。
当然jQueryを先に読み込ませることを忘れずに。
/* HTML JS読み込み */
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/jquery.mb.YTPlayer.min.js"></script>body内の該当部分にコードを設置。以下の例のように親ボックス（#movie-wrap）を作り、動画の設置部分（#youtube）を内包することにした。
videoURLのyoutubeIDは目的の動画のIDに置き換えること。
また今回は背景なので各ボックスの幅、高さのCSS指定を必ずしておく。CSSの細かい調整はお好みで。
/* HTML */
<div id="movie-wrap">
<div id="youtube" data-property="{
videoURL: 'https://youtu.be/youtubeID',
containment: '#movie-wrap',
mute: true,
showControls:false,
loop: true,
autoPlay: true,
showYTLogo: false
}"></div>
</div>今回使用したオプション（data-property内）は
- videoURL・・・表示するYouTubeのURL
- containment・・・背景にYouTubeを表示する要素
- mute・・・音声オフ（false=off/true=on）
- showControls・・・YouTubeコントローラ表示（false=off/true=on）
- loop・・・ループさせるか（false=off/true=on/数値で回数）
- autoPlay・・・自動再生（false=off/true=on）
- showYTLogo・・・YouTubeロゴの表示（false=off/true=on）
body閉じタグの前あたりで以下のように締めくくる。
/* HTML内script設定 */
<script>
(function($) {
$("#youtube").YTPlayer();
})(jQuery);
</script>data-propertyに使えるオプションを詳しくみたい場合は以下で。
スマホ時を考えておく
動画は重いためファーストビューが遅くなる可能性が高い。なのでGoogle様から嫌われてしまうかも。
と言うか狭いスペースで見せるほど必要なものか？など自問自答もあるかと思う。
そんな時は「いっそ画像に置き換える」こともひとつの方法。
今回は背景なので画像用のボックスの幅、高さのCSS指定を必ずしておく。
/* HTML */
<div id="img-wrap"></div> <!-- 画像用のdivを追加 -->
<div id="movie-wrap">
<div id="youtube" data-property="{
videoURL: 'https://youtu.be/youtubeID',
containment: '#movie-wrap',
mute: true,
showControls:false,
loop: true,
autoPlay: true,
showYTLogo: false
}"></div>
</div>jQueryでスマホ時（ブレークポイント）で動画と画像の切り替えを行う。
/* HTML内script設定 */
<script>
(function($) {
$(window).on("load resize",function(){
if( window.matchMedia("(min-width: 769px)").matches ){
$("#youtube").YTPlayer();
$("#img-wrap").removeAttr("style");
} else {
$("#img-wrap").css({
"background-image": "url( 画像のURL )",
"background-position": "center center",
"background-size": "cover"
});
}
});
})(jQuery);
</script>#img-wrapに背景画像のCSSを最初から設定しておき、非表示にしておいてブレークポイントで振り分けるのもありかも。と言うか、そっちの方が簡単と後で気づく。
またこの方法だと「画像まんまだとつまらない」とワガママを言うクライアントには、スマホ時にスライドショー系のプラグイン（vegas.jsとか）を使うことも出来る。（軽量化した意味がないが）
