jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる（レスポンシブ対応済）

投稿日：2021/10/30
JavaScript/jQuery
colorbox, モーダル, youtube

「Colorbox」は簡単で多機能なモーダルウィンドウを表示できるjQueryプラグインです。
Colorboxの基本的な使い方（画像をモーダルで表示する方法）はこちらの記事で解説しましたが、今回はYoutubeをモーダルで表示する使い方を紹介します。

プレビュー

実際に動いているデモを下記から確認できます。

DEMO

コードサンプル

<p><a class="trig-youtube" href="#youtube">モーダルを開きます</a></p>
<div style="display: none;">
    <div id="youtube" class="youtube">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/jhhGWsO0KKM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

.youtube{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

$(function() {
    $(document).ready(colorbox);
    $(window).on('resize',colorbox);
    function colorbox() {
        var baseWidth = $( window ).width();
        var w = baseWidth*0.8;
        var h = w*0.5625;
        $( '.trig-youtube' ).colorbox({
            inline: true,
            opacity: 0.6,
            innerWidth: w,
            innerHeight: h,
            maxWidth: '90%',
            maxHeight: '90%'
        });
    };
});

Youtubeのiframeはdiv.youtubeで内包してCSSでレスポンシブ化しています。
JSでcolorboxのinnerWidthとinnerHeightを設定することでiframeのサイズを指定していますが、innerWidthとinnerHeightの数値を自動的に計算するように調整しています。