YouTubeをポップアップさせる
modal-video.js
- ポップアップ01
- ポップアップ02
- ポップアップ03
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があれば以下を実行
$(".js-modal-video").modalVideo({
channel: "youtube",
youtube: {
rel: 0, //関連動画の指定
autoplay: 0, //自動再生の指定
controls: 0, //コントロールさせるかどうかの指定
},
});
}
})();
init.jsなどのファイルを作り、上のコードを書いて読み込ませます。