【JavaScript実践 #7】YouTube動画をサムネイル付きでモーダル再生できるプラグイン「lity.js」を解説！

今回は、YouTube動画をサムネイル付きでモーダル再生できるプラグイン「lity.js」を解説します。
サムネイル付きにするのには、少しコツがいりますが、コピペで簡単に実装できちゃいます。

YouTubeにもアップしていますので、見ていただけたら嬉しいです！

lity.jsとは？

lity.jsとは、動画や画像をモーダル（ポップアップ）で表示させることができる、jQueryのプラグインです。
MITライセンスなので、カスタマイズも商用利用もOKです。

実装もとてもシンプルで、基本的な挙動だけであれば、jsのコードも書く必要がありません。

lity.jsの使い方

それでは早速、lity.jsの使い方を解説します。

公式からダウンロード

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

必要なファイルをコピーする

ダウンロードしたzipファイルを解凍し、以下の2ファイルを自分のサイトデータにコピーします。

• lity.css
• lity.js

ファイルを読み込み

コピーできたら、htmlからファイルを読み込みます。

<link rel="stylesheet" href="css/lity.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/lity.js"></script>

lity.jsは、jQueryのプラグインなので、jQueryも忘れずに読み込みましょう。

YouTube動画を埋め込む

動画を埋め込みたい箇所に、以下コードを記述します。

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

ブラウザで確認します。

テキストをクリックすると、モーダルで動画が再生されるかと思います。

aタグに「data-lity」を追加するだけでモーダル表示することができます。
しかもレスポンシブに対応しているので、どんなウィンドウサイズでも、自動でリサイズしてくれます。

サムネイル付きにする

テキストリンクだと動画ということが分からないので、サムネイル付きにしたいと思います。
htmlとcssを編集します。

<div id="wrap">
    <div class="youtube_mv">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/ow1YxTacf5s" 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=ow1YxTacf5s" data-lity></a>
    </div>
</div>

htmlは、まず全体を「wrap」で囲みます。
この例では、動画以外のコンテンツがないため、スタイルを維持するために追加しています。

wrapの中に、「youtube_mv」というclassのdivタグを記述します。
class名は何でも大丈夫です。

youtube_mvのなかに、「iframe」と、「a」を同列で記述します。

「iframe」は、埋め込みたい動画をyoutubeで開くと、「共有」というリンクがあるので、そこからコードをコピーすることができます。
「a」のhrefには、youtubeのリンクと、「data-lity」を記述します。

#wrap {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.youtube_mv {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 56.25%;
}
.youtube_mv iframe,
.youtube_mv a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

次にcssです。
wrapは、この例のスタイル調整用なので、不要です。

「youtube_mv」にベースのスタイルを記述して、「iframe」と「a」に、absoluteを効かせています。
こうすることで、iframeの上にaタグを載せることができ、クリック判定がaタグにすることができるようになります。

最後に

以上、YouTube動画をサムネイル付きでモーダル再生できるプラグイン「lity.js」を解説しました。

lity.jsは、簡単にモーダルで表示させることができて、とても便利です。

動画以外にも使えるので、モーダルで表示させたい時は、試してみてください。