今回やりたいこと

最初はサムネイルで表示させておいて、クリックするとポップアップで動画が再生されるというような実装をします。
スマホの場合はYoutubeの場合、埋め込みをするだけで勝手に全画面に拡大されて動画が再生されるので、今回の対象はあくまでもPCという仮定です。

使うプラグイン

今回は簡単そうなプラグインがあったので「modal-video」というプラグインを使用します。

こちらの記事を参考にして実装をしようとしたのですが、npmでプラグインをインストールして、jsの処理を記述する方法が分からず苦戦しました。

今回紹介するのはあくまでもnpmからプラグインをインストールして実装する方法ですのでご了承ください。

modal-videoのインストール

まずプラグインをインストールします。以下のコマンドを実行しましょう。

npmの公式サイトにインストール方法が書いてあります。

npm i modal-video

jQueryの記述

まずnpmでインストールしたプラグインをjsファイルに読み込ませる必要があります。npmからインストールした場合、modal-videoはこのように読み込む必要があるようです。

import ModalVideo from "modal-video";

そしてこのmodal-videoを発火させる記述としては以下のようになります。

new ModalVideo(".js-modal-trigger");

HTMLとCSS

HTML

まずHTMLですが、上記jsの「js-modal-trigger」というクラスをクリックした時にYoutubeがポップアップで表示されます。

ソースコード例としては以下のようになります（Pug記法を使用しております）。

div(class="js-modal-trigger" data-video-id="Youtubeの動画のID")

CSS

modal-video専用のCSSが用意されているので、以下のGithubからダウンロードして、CSSを読み込ませましょう。

Github

たったこれだけでYoutubeの動画ポップアップ表現ができました。

参考にさせていただいた記事

今回参考にさせていただいた記事はこちらです。YoutubeだけではなくVimeoのパターンの説明も書かれているので是非参考にしてみてください。