jQueryプラグインのjquery.magnific-popup.jsを利用して、モーダルウィンドウ内にYouTubeの動画を再生します。動画はレスポンシブ対応にします。
html内のソースをidで指定してモーダルウィンドウ内に表示します。動画に関連するhtmlとCSSの部分以外は下記記事と同様の構造です。
まず、htmlのコードです。
モーダルウィンドウを起動するリンクは、YouTubeのサムネイル画像を利用します。下記URLでYouTubeの動画から320×180pxのサムネイル画像を表示します。
http://img.youtube.com/vi/動画ID/mqdefault.jpg
モーダルウィンドウ内の動画を埋め込むiframeタグでは、src属性で下記のパラメーターを設定しています。
controls=0 //プレーヤーコントロールを表示しない
modestbranding=1 //YouTubeロゴを表示しない
rel=0 //動画再生終了後、再生した動画と同じチャンネルから関連動画を表示する
<ul>
<li><a class="modal-open" id="link_category01"><img src="http://img.youtube.com/vi/動画ID/mqdefault.jpg" alt=""></a></li>
<li><a class="modal-open" id="link_category02"><img src="http://img.youtube.com/vi/動画ID/mqdefault.jpg" alt=""></a></li>
</ul>
<div id="modal_wrap">
<div id="category01" class="modal-content mfp-hide">
<div class="modal-header">
<p class="modal-title">動画タイトル01</p>
<button type="button" class="close mfp-close">×</button>
</div>
<div class="modal-body">
<div><iframe src="https://www.youtube.com/embed/動画ID?controls=0&modestbranding=1&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
<div class="modal-footer">
<button type="button" class="btn mfp-close">閉じる</button>
</div>
</div>
<div id="category02" class="modal-content mfp-hide">
<div class="modal-header">
<p class="modal-title">動画タイトル02</p>
<button type="button" class="close mfp-close">×</button>
</div>
<div class="modal-body">
<div><iframe src="https://www.youtube.com/embed/動画ID?controls=0&modestbranding=1&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
<div class="modal-footer">
<button type="button" class="btn mfp-close">閉じる</button>
</div>
</div>
</div>続いてCSSのコードです。
モーダルウィンドウ内の動画を埋め込むiframeタグとそれを内包するdivタグにレスポンシブ対応の設定をします。
.modal-body div {
position: relative;
padding-top: 56.25%; /* アスペクト比16:9の場合の縦幅 */
}
.modal-body iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}