post date : 2019/11/15

JavaScript

今回やりたいこと

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

使うプラグイン

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

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

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

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

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


npm i modal-video

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


import ModalVideo from "modal-video";

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


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

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

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


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

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

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

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