YouTubeをポップアップさせる方法

head

                               
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/modal-video@2.4.2/css/modal-video.min.css" />
<!-- jQuery -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/modal-video@2.4.2/js/jquery-modal-video.min.js"></script>
                               
                           

jQuery

                               
(function () {
if ($(".js-modal-video").length) {
$(".js-modal-video").modalVideo({
channel: "youtube",
youtube: {
rel: 0,
autoplay: 0,
controls: 0,
},
});
}
})();
                               
                           

CSS

                               
特になし
                               
                           

HTML

                           
<div class="c-flex c-flex--text">
<a
href="javascript:void(0);"
data-video-id="_gI2YnYke1I"
class="js-modal-video"
>ポップアップ01</a
>
<a
href="javascript:void(0);"
data-video-id="_6qDL8QY_Ps"
class="js-modal-video"
>ポップアップ02</a
>
<a
href="javascript:void(0);"
data-video-id="k8fDN0CCMM0"
class="js-modal-video"
>ポップアップ03</a
>
</div>
<div class="c-flex c-flex--images">
<a
href="javascript:void(0);"
data-video-id="PT2_F-1esPk"
class="js-modal-video"
>
<img src="./images/popup01.png" alt="" />
</a>
<a
href="javascript:void(0);"
data-video-id="FM7MFYoylVs"
class="js-modal-video"
>
<img src="./images/popup01.png" alt="" />
</a>
<a
href="javascript:void(0);"
data-video-id="UfGMj10wOzg"
class="js-modal-video"
>
<img src="./images/popup01.png" alt="" />
</a>
</div>