オリジナルで作成したサムネイル画像をクリックしてYoutubeの動画を再生します。PC表示ではクリックのタイミングでサムネイル画像を消して動画を再生します。SP表示ではサムネイル画像を消さずに別ウィンドウで動画を再生します。
htmlのコードは下記になります。
Youtubeの動画を埋め込んだiframeタグのsrc属性のパラメータにenablejsapi=1を設定するのがポイントです。これでサムネイル画像クリック時の動作として、jQueryから動画再生の指定が可能になります。
sp-spacer.gifはCSSでSP表示の場合のみ表示させ、jQueryでPC表示とSP表示の判定基準にしています。
<div class="movie-content-wrap">
<iframe width="800" height="450" src="https://www.youtube.com/embed/ZRCdORJiUgU?rel=0&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<img src="/wp-content/themes/cocoon-child-master/images/movie-thumb.jpg" alt="" class="movie-thumb">
</div>
<img src="/wp-content/themes/cocoon-child-master/images/sp-spacer.gif" alt="" class="sp-spacer">続いてCSSのコードです。
動画のレスポンシブ対応、サムネイル画像の配置、SP表示用のスペーサーの指定をします。
.movie-content-wrap {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.movie-content-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.movie-content-wrap img {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.sp-spacer {
display: none;
width: 1px;
height: 1px;
}
@media screen and (max-width: 768px) {
.sp-spacer {
display: block;
}
}最後にjQueryのコードです。
サムネイル画像クリック時の動作になります。まずSP表示場合は単純にwindow.openを利用して別ウィンドウでYoutubeの動画を再生します。次にPC表示の場合ですが、videoControl関数を呼び出します。videoControl関数では対象のiframeタグのcontentWindowを変数playerWindowに格納します。そして、postMessageを利用してiframeのウィンドウへイベントを渡します。渡すイベントはplayVideo（再生）になります。最後にクリックしたサムネイル画像を消して再生された動画を表示します。
$(function() {
$(".movie-thumb").on("click", function(){
if($('.sp-spacer').is(':visible')){
window.open('https://www.youtube.com/embed/ZRCdORJiUgU?rel=0&autoplay=1','_blank');
} else {
videoControl("playVideo",$(this).prev("iframe"));
$(this).hide();
}
});
function videoControl(action,tgt){
var $playerWindow = $(tgt)[0].contentWindow;
$playerWindow.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');
}
});