【modal-video.js】YouTube動画をポップアップで表示させる方法

YouTubeなどの動画ポップアップやモーダルで表示させたい場合の方法を紹介していきたいと思います。

jQueryプラグインである「modal-video.js」を使えば簡単に実装することができます。

modal-video.jsの使い方

必要なファイルを読み込む

「modal-video.js」 を使うには必要なファイルを読み込む必要があります。

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

jQuery、modal-video.min.css、jquery-modal-video.min.jsを読み込みます。

htmlでボタンを用意する

<div data-video-id="" class="js-modal-video">
    <img src="https://placehold.jp/500x200.png" alt="">
</div>

data-video-idにはyouTubeのURLの末尾を設定します。

jsを記述する

jQuery(".js-modal-video").modalVideo({
	channel: "youtube",
	youtube: {
	autoplay: 1,
	mute: 1,
	}
});

サンプル