WordPress | 「lity.js」を使ってYouTubeのポップアップ動画を設置する方法
WordPressでjQueryプラグイン「lity.js」を使って簡単にレスポンシブなYouTubeのポップアップ再生動画を設置する方法を紹介します。
「lity.js」を使ってYouTubeのポップアップ動画を設置する
WordPressに限った話ではありませんが、YouTubeなどの埋め込み動画を単に並べてしまうとページが重くなったり、好みではありますがユーザビリティ的も見た目的にもイマイチだったりします。
Lity – Lightweight, accessible and responsive lightbox
「lity.js」は簡単に導入できて記述も簡単、表示される動画もPC・スマートフォンで確認してもスムーズに表示されユーザーが迷わずに閉じる事も可能になっています。
ファイルをダウンロードして使う場合
https://sorgalla.com/lity/にアクセスして最新の「lity.js」と「lity.css」をダウンロードします。
現在、「lity.js」の最新バージョンはv2.4.1です。（2023年02月22日更新）
<link href="src/lity.css" rel="stylesheet">
<script src="src/lity.js"></script>CDNを利用する場合
以下のサイトから最新のCDNファイルURLを確認して下さい。
lity – cdnjs.com – The best FOSS CDN for web related libraries to speed up your websites!
「lity.js」は「jQuery」と「lity.js」と「lity.css」の２つのファイルを利用します。
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/2.3.1/lity.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/lity/2.3.1/lity.js'></script>WordPressの場合、このプラグインを多様しないブログ・サイトであれば殆どのページで無駄な読み込みになってしまうので、カスタムフィールドなどを利用して記事単位で読み込むようにします。
WordPressのプラグインを使って無駄に全ページに反映させてしまうより、単体ページを対象にこういったjs、jQueryのプラグインを使った方が良い気もします。
「lity.js」の使い方
上記の「lity.js」ファイルの読み込みに成功していたら「data-lity="data-lity"」と付与されたリンクタグを設置するだけでポップアップする埋め込み動画に変換してくれます。
WordPressの場合、段落ブロックですとaタグは書き換えられてしまうのでカスタムHTMLブロックを利用しましょう。
<p><a href="YouTube動画のURL" data-lity="data-lity">動画</a></p>「lity.js」でのポップアップ再生動画設置サンプル
「lity.js」を利用したポップアップ再生動画設置サンプルになります。
<p><a href="https://www.youtube.com/watch?v=SX_ViT4Ra7k" data-lity="data-lity">米津玄師 MV「Lemon」 - YouTube</a></p>“RAT RACE" Full CHOZEN LEE and THE BANG ATTACK – YouTube
globe / OVER THE RAINBOW – YouTube
少しだけ面倒ですがサムネイルのパターンは同じなので表示したポップアップ動画も可能です
<p><a href="YouTube動画のURL" data-lity="data-lity"><img src="http://i.ytimg.com/vi/動画ID/mqdefault.jpg" border="0" /></a></p>
うまくいかない時の原因と対処方
「lity.js」を使ってYouTubeのポップアップ動画を設置する際に、失敗する、うまくいかない時の原因と対処方をまとめています。
jQueryが非同期で読み込まれている
コンソールログに「TypeError: $ is not a function」と出た場合はjQueryが読み込まれていないか、または非同期で読み込まれていて「lity.js」が先に読み込まれてしまっている。
テーマの機能などで記事単位でjQueryが非同期・同期切り替えが可能であれば、利用します。
多くの場合は「lity.js」も非同期読み込みにする事で上手く機能すると思われます。
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/2.3.1/lity.css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lity/2.3.1/lity.js' defer></script>埋め込み再生を拒否設定している動画で試している
一部の動画は配信者側で埋め込み再生を拒否設定にしてあるので注意です。
lity.min.jsを使っている
縮小jsファイルを使っているとWordPressテーマやプラグインの縮小機能などでエラーがでてしまうかもしれません。