のせっち 
こんにちは！
フリーランスWebディレクター兼エンジニアののせっち@nosecchi01です。
Web制作案件で画像や動画を簡単にモーダル表示できるjQueryプラグイン「lity.js」の便利な使い方を解説します。
サムネイル付きのよく見るYouTube埋め込みを使いつつ、クリックでポップアップ再生したい！
というご要望の方のための記事です。
本記事は下記を前提として解説します。
- lity.jsの基本的な使い方は知っている。
- YouTubeの動画を埋め込む方法も知っている。
- その上で、YouTubeの埋め込みコード(iframe)をクリックした際にポップアップ表示される方法を知りたい。
それではいってみましょう！
目標物を確認する
codepenで実際の動きを見ていきます。
See the Pen How to Use lity.js by Yuki Nose (@yukinouz1) on CodePen.
NG例 → クリックで埋め込み動画がそのまま再生されます…。
OK例 → クリックでYouTube動画がポップアップ再生します！
lity.jsとは？
画像や動画をポップアップで表示させることができるjQueryプラグインです。
今回僕がlity.jsを選択した理由は下記です。
- litebox系で設定が簡単
- 定期的に更新されている
- 商用利用OK
更新情報はgithubで確認できます。定期的に更新されているかどうかは非常に重要です。
lightbox系だとWordPressプラグインにもなっているFancyboxが思い浮かぶのですが、こちらは商用利用にライセンスが必要という事で採用を見送りました。
機能面はおそらくFancyboxの方が上です。
lity.jsの使い方
使い方は簡単なので簡潔にいきます。
- 公式からlity.jsをダウンロード
- lity.cssとlity.jsを使用。(min.css及びmin.jsを使用するかはお好みで)
- aタグにdata-lityを記述
これだけでOKです。
公式にデモがあるのでそちらで実際の動きは確認可能です。
YouTubeの埋め込みコードをポップアップさせる
aタグを使ったYouTubeリンクをポップアップさせるならば簡単ですが、埋め込みコード(iframe)をポップアップさせるには一手間必要です。
NG例：
下記の書き方ではポップアップされず埋め込んだYouTube動画がそのまま再生されます。
<a href="https://youtu.be/WGdVX9fCHOI" class="ytube" data-lity>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Nxwt_s1lM04" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</a>.ytube {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 56.25%;
position: relative;
width: 100%;
iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}CSSはよく見るYouTubeをレスポンシブ表示させる方法です。
このやり方では、埋め込みコードの判定が上に来てしまい、aタグをクリックすることができません。
OK例：
<div class="ytube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Nxwt_s1lM04" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<a href="https://youtu.be/WGdVX9fCHOI" data-lity></a>
</div>aタグで囲まずに、<iframe>の兄弟要素にしたことに注目してください。
.ytube {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 56.25%;
position: relative;
width: 100%;
iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
a {
/* lityを動かすためにiframeを覆う */
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}aタグにcssを追加しました。
<iframe>の埋め込みコードの上にaタグ（data-lity）を重ねて、<iframe>を覆っている状態です。これで見た目は通常のYouTube埋め込みですが、クリック判定はaタグが受けてくれるのでポップアップ表示してくれます。
まとめ
・lity.jsを使えば簡単に画像や動画のポップアップ表示が可能
・YouTubeの埋め込みコードをポップアップさせるには一手間必要