YouTube埋め込みデフォルトサムネイルをクリックしたらモーダルウィンドウが開いて再生して欲しい！

毎日が手探りWEBデザイナー、2月下旬にキャンプに行って薪ストーブをテントにインストールチャレンジ予定でご機嫌なおにぎりです。

WordPressの固定ページにYouTubeサムネイル一覧を表示し、YouTubeの埋め込みデフォルトサムネイルをクリックして、サムネイル上で再生されるのではなく、モーダルウィンドウ（背景が薄暗くなって画面に動画が浮かび上がる）が開いて再生される形を作りたい！ということで色々検索してごにょごにょして実装しました！

まずはクライアントさんがWordPressで動画タイトルとYouTube動画アドレスを記入して更新を押すだけで指定の固定ページに追加されて一覧表示されていく…というカスタムフィールドを構築した後の話なのですが、そちらはまた別ノートでまとめます🐶

参考にさせていただきました。（簡単すぎて驚きです！）
https://www.good-f-design.com/js-practice-07/

参考にさせていただきました。（動画以外も詳しく説明してくださっています！）
https://nelog.jp/lity-js

使用するのはjQueryのプラグイン「lity.js」です。
https://sorgalla.com/lity/
YouTube以外にも画像、Googleマップ、Vimeoなどもモーダルウィンドウで表示できます。

まずは「lity.js」を設置！

私は今までモーダルウィンドウは「Colorbox」や「Lightbox」を利用していたのですが、
今回使用した「lity.js」はシンプルで軽く、設置も簡単でした。
MITライセンスなので、カスタマイズも商用利用もOK、とのことです。🐶
WordPressに限らず静的サイトでも実装できます。

まずはlity.jsを公式からダウンロードします。
https://sorgalla.com/lity/

必要なファイルはたった2つ！

公式サイトからダウンロードしたzipファイルを解凍して、以下の2ファイルを任意の場所にコピーします。

lity.css
lity.js

私の場合は
/css/lity.css
/js/lity.js

にコピーしました。

ファイルを読み込みます

header.php内に読み込むために
＜head＞＜/head＞
内に記載します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/lity.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/lity.js"></script>

lity.jsは、jQueryのプラグインなので、jQueryも忘れずに読み込みます。
おそらくは既に読み込んでいる場合が多いと思うので、読み込んでいる場合は

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/lity.css">
<script src="<?php echo get_template_directory_uri(); ?>/js/lity.js"></script>

この2行で大丈夫です！👍

テキストや画像をaタグで囲んでのモーダル表示

動画を埋め込みたい箇所に以下を記載します。

<a href="https://www.youtube.com/watch?v=CNeWpaRxJNE" data-lity>YouTube再生</a>

※グループ会社の動画を使用してます。

aタグに「data-lity」を追加するだけでモーダル実装が可能です。
「data-lity=””」でもOKです。

ブラウザで確認し、「YouTube再生」のテキストリンクをクリックするとモーダルウィンドウが開き動画が再生されます。
レスポンシブに対応しているので自動リサイズをしてくれます（嬉しい）

しかーーーし。
今回はYouTubeの埋め込みサムネイルをクリックしてモーダルウィンドウが開くようにしたいのです。

YouTubeサムネイルをクリックしてモーダルウィンドウが開くようにする！

YouTubeサムネイルが並んでいるページの、サムネイルをクリックすると、サムネイルの大きさのまま再生されるのです。
そうではなく、ポップアップで大きく表示されるようにしたい、モーダルウィンドウが開いて背景が薄暗くなって欲しい！
ということで以下をhtmlとcssに記載します。

<div id="youtube_wrap">
<div class="youtube_modal">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CNeWpaRxJNE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<a href="https://www.youtube.com/watch?v=CNeWpaRxJNE" data-lity></a>
</div>
</div>

idもclass名も何でも大丈夫、任意で変えてください。

＜div class=”youtube_modal”＞

ここに「iframe」と「a」を記述

＜/div＞

iframeには埋め込みたい動画をYouTubeで開き、「共有」をクリックして「埋め込み」をクリック、表示された「動画の埋め込み」タグをコピーしてください。

aタグにはアドレスバーに表示されている

https://www.youtube.com/watch?v=●●●●●●●●

をコピーして、「data-lity」を記述します。

cssには以下を記述します。

/* YouTubeサムネイルをモーダルウィンドウで再生する */
#youtube_wrap {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.youtube_modal {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 56.25%;
}
.youtube_modal iframe, .yyoutube_modal a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}