lity.jsを使ってYouTube埋め込み動画(iframe)をポップアップ再生する【lightbox】

投稿日 2019年11月21日
更新日 2020年3月30日
著者のせっち
カテゴリープログラミング

こんにちは！

フリーランスWebディレクター兼エンジニアののせっち@nosecchi01です。

Web制作案件で画像や動画を簡単にモーダル表示できるjQueryプラグイン「lity.js」の便利な使い方を解説します。

本記事は下記を前提として解説します。

lity.jsの基本的な使い方は知っている。
YouTubeの動画を埋め込む方法も知っている。
その上で、YouTubeの埋め込みコード(iframe)をクリックした際にポップアップ表示される方法を知りたい。

それではいってみましょう！

lity.jsとは？

画像や動画をポップアップで表示させることができるjQueryプラグインです。

公式：https://sorgalla.com/lity/

今回僕が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動画がそのまま再生されます。

<HTML>

<a href="https://youtu.be/WGdVX9fCHOI" class="ytube" data-lity>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/WGdVX9fCHOI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</a>

<SCSS>

ytube{
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-top: 56.25%;
  width: 100%;
   iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
}

CSS(SCSS)の方はよく見るYouTubeをレスポンシブ表示させる方法です。

このやり方では、埋め込みコードの判定が上に来てしまい、aタグをクリックすることができません。

OK例：

<HTML>

<div class="ytube">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/WGdVX9fCHOI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <a href="https://youtu.be/WGdVX9fCHOI" data-lity></a>
</div>

<SCSS>

ytube{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-top: 56.25%;
  width: 100%;
   iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    a{
      /* lityを動かすためにirameを覆う */
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
}