ユニソルデザインの備忘録
記録
2023.02.02

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

  • Onigiri
  • 毎日が手探り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などもモーダルウィンドウで表示できます。

そもそもモーダルウィンドウってなんぞや???
と言う方がいらっしゃると思いますが、画像とかをクリックしたら画面が透かしのグレーになって?画面が暗くなって?クリックした画像が大きく最前面に表示されるアレです。
YouTubeの埋め込みをすると、埋め込みサムネイルのサイズのまま再生されてしまい
「違うんだよ〜そうじゃないんだよ〜」
とのことで、今回の実装に至りました!😃

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

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

 

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

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

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

 

lity.css(lity.min.cssでも可)
lity.js(lity.min.jsでも可)
「lity.js」必要なのはこの2ファイル
私の場合は
/css/lity.css
/js/lity.js

 

にコピーしました。
lity.min.cssでもlity.min.jsでも可です。
4つ全部を読み込む必要はありません。
何が違うの?との疑問、私も持っていました。
min.はファイル容量を下げるために、改行などを省いて全部1行で書いたファイルになるので、CSSやJSをカスタムしたい方はどこに記載されているか発見するのにとても時間がかかる…
でも容量がmin.無しよりは小さいので、サイト自体の読み込みを軽くしたい方やCSSやJSをカスタムしない方はmin.有りを使用すると良いと思います!
私はカスタムしたい場合はmin.無しを読み込んでいます!

ファイルを読み込みます

読み込むために
<head>〜〜</head>
内に記載します。
<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>
lity.jsは、jQueryのプラグインなので、jQueryも忘れずに読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
おそらくは既に読み込んでいる場合が多いと思うので、読み込んでいる場合は上記2行で大丈夫です!👍
JSはfooter派の方は
<script src="<?php echo get_template_directory_uri(); ?>/js/lity.js"></script>
</body>
</html>
こんな感じでJSのみをbodyの閉じタグ前に読み込んでください😃

テキストや画像を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%;
}
共有を押して
埋め込みを押して
iframeコードをコピー
準備ができたらアップロードして、ブラウザを確認!
何とも簡単に実装が出来ました!✨
今度はユーザーさんが簡単にYouTube動画を一覧投稿できるカスタムフィールドの実装方法をまとめます。
今回のYouTubeサムネイルをモーダルウィンドウで開くのと同時進行で進めていたので、
同じ悩みで唸っている方の助けになればいいなと思います😀

 

それではまた次回。

ユニソルデザインでは紙媒体グラフィック以外にもWEBデザイン、動画撮影や動画編集、動画広告作成なども承っております!
お見積は無料ですのでご相談フォームよりお問い合わせください✨

ユニソルデザインご相談フォームユニソルデザインご相談フォーム
ユニソルデザインご相談フォーム