こんにちは、mickです。
Webサイトを作る中で、顧客から Youtube の動画を Webサイトを移動しないでポップアップで表示して欲しいとありました。
調べてみると、JavaScriptを使う方法が。
しかもやってみると超簡単。
参考にさせてもらったところは、非常にシンプルに書いてくれています。
それほど簡単でした。
参考URL：Magnific Popupで作るjQueryのモーダルウィンドウ
悩んだのは、ダウンロードした JavaScript のファイルをどこに設置しようかということくらい（笑）
使う JavaScript のファイル（ライブラリ）は、Magnific Popup です。
Webの環境は、Wordpress 5.8 です。
Magnific Popup を使って Youtube をポップアップ表示
Magnific Popup を使うと Jpeg などの画像ファイルをポップアップ（モーダル）ウィンドウで表示ができるようになります。
これは、画像ファイルだけではなくて、動画でもOK。
動画でやる場合は、iframe として扱って設定します。
Magnific Popup をダウンロード
Magnific Popup の配布サイトから Magnific Popup のファイル（ライブラリ）をダウンロードします。
ファイルを解凍して dist フォルダの中身だけ使います。
Magnific Popup を WordPress に設置
Magnific Popup のファイル（ライブラリ）を WordPress に設置します。
場所に悩んだら、assets フォルダを用意して、そこに設置するのがいいと思います。
WordPress の基本テーマ（Twenty Twenty など）がそういう造りになっているからです。
自分が悩んだのはここの設置場所くらい。
JQuery と Magnific Popup のライブラリを読み込む
JavaScript のライブラリは、wp_enqueue_script で。
CSS は、wp_enqueue_style で。
それぞれ functions.php で読み込む設定をします。
wp_enqueue_style('magnific-popup.min', /assets/css" . '/magnific-popup.css', false, version_num(), 'all');
wp_enqueue_script('jquery.min', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js', false, false, false);
wp_enqueue_script('jquery.magnific-popup.min', "/assets/js" . '/jquery.magnific-popup.min.js', false, version_num(), false);
JavaScript のコーディング
JavaScript のコーディングで、ポップアップ（モーダル）ウィンドウ表示させたい要素のクラス名を設定します。
ここでは .popup-iframe としています。
名前に悩んだらこのまま使ってください。
$(function(){
$('.popup-iframe').magnificPopup({
type: 'iframe',
disableOn: 500, //ウィンドウ幅が500px以下だったらモーダル表示させずにリンク先へ遷移
mainClass: 'mfp-fade',
removalDelay: 200,
preloader: false,
fixedContentPos: false
});
});HTML のコーディング
HTML でのコーディングです。
さっき作った .popup-iframe を class で設定します。
<a class="popup-iframe" href="https://www.youtube.com/watch?v=YalIa0ywe68">YouTube動画</a>まとめ。
Magnific Popup を使って Youtube をポップアップ（モーダル）ウィンドウで表示する方法を紹介しました。
Youtube の動画がポップアップ（モーダル）ウィンドウで表示されるだけで、洗練された感じがあります。
今回は、iframe を使っただけですが、Jpeg などの画像でもいけます。
参考URLにやり方があるので、置いておきますね。
参考URL：Magnific Popupで作るjQueryのモーダルウィンドウ
記事を読んでくれて嬉しいです。
今日もありがとうございました。
初稿 2021/08/20
