YouTubeのポップアップモーダルを作成しました。

現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。
使用したライブラリは「modaal」、参考にしたページは「動くWebデザイン モーダルウィンドウ -ページを開くと、背景が暗くなり動画を表示-」です。
デモ
デモサイトはこちらです。
画像をクリックすると、YouTubeのポップアップモーダルが表示されます。


最近YouTubeを始められた綾部さんの動画を使用しました。
作成方法
必要なファイルの読み込み → HTMLの記述 → JSの記述 の順番に見ていきます。
必要なファイルの読み込み
CSSファイルの読み込み
headタグで、modaal.min.cssを読み込みました。
<head>
//省略
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css"
//省略
</head>
JSファイルの読み込み
bodyの閉じタグの直前で、modaal.min.jsとyoutube-popup.js(自作JSファイル)を読み込みました。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.min.js"></script>
<script src="youtube-popup.js"></script>
</body>
HTMLの記述
リンク先にはYouTubeの埋め込みURLを指定し、画像をクリックするとモーダルが開くような準備をしました。
<a href="https://www.youtube.com/embed/eXE3ejJeJfQ" class="video-open">
<img src="movie.png" alt="動画" class="movie__img"/>
</a>
YouTubeの埋め込みURLは、埋め込みたいYouTube動画の「共有 → 埋め込む」から取得しました。
JSの記述
HTMLのリンクをクリックしたのをきっかけにモーダルが表示されるような記述を行いました。
function youtube_modal(trigger) {
$(trigger).modaal({
type: "video",
});
}
youtube_modal(".video-open");