Youtubeをポップアップで再生させる方法
目次
今回やりたいこと
最初はサムネイルで表示させておいて、クリックするとポップアップで動画が再生されるというような実装をします。
スマホの場合は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を読み込ませましょう。
たったこれだけでYoutubeの動画ポップアップ表現ができました。
参考にさせていただいた記事
今回参考にさせていただいた記事はこちらです。YoutubeだけではなくVimeoのパターンの説明も書かれているので是非参考にしてみてください。