YouTube埋め込みデフォルトサムネイルをクリックしたらモーダルウィンドウが開いて再生して欲しい!
-
毎日が手探りWEBデザイナー、2月下旬にキャンプに行って薪ストーブをテントにインストールチャレンジ予定でご機嫌なおにぎりです。
参考にさせていただきました。(簡単すぎて驚きです!)
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」を設置!
今回使用した「lity.js」はシンプルで軽く、設置も簡単でした。
MITライセンスなので、カスタマイズも商用利用もOK、とのことです。
WordPressに限らず静的サイトでも実装できます。
まずはlity.jsを公式からダウンロードします。
https://sorgalla.com/lity/


必要なファイルはたった2つ!
lity.css(lity.min.cssでも可)
lity.js(lity.min.jsでも可)

/css/lity.css
/js/lity.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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
JSはfooter派の方は
<script src="<?php echo get_template_directory_uri(); ?>/js/lity.js"></script>
</body>
</html>
テキストや画像をaタグで囲んでのモーダル表示
<a href="https://www.youtube.com/watch?v=CNeWpaRxJNE" data-lity>YouTube再生</a>
aタグに「data-lity」を追加するだけでモーダル実装が可能です。
「data-lity=””」でもOKです。
ブラウザで確認し、「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>
<div class=”youtube_modal”>
iframeには埋め込みたい動画をYouTubeで開き、「共有」をクリックして「埋め込み」をクリック、表示された「動画の埋め込み」タグをコピーしてください。
aタグにはアドレスバーに表示されている
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%;
}






今度はユーザーさんが簡単にYouTube動画を一覧投稿できるカスタムフィールドの実装方法をまとめます。
今回のYouTubeサムネイルをモーダルウィンドウで開くのと同時進行で進めていたので、
同じ悩みで唸っている方の助けになればいいなと思います
それではまた次回。
ユニソルデザインでは紙媒体グラフィック以外にもWEBデザイン、動画撮影や動画編集、動画広告作成なども承っております!
お見積は無料ですのでご相談フォームよりお問い合わせください