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

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

こんにちは！

フリーランス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 – Lightweight, accessible and responsive lightbox

Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box.

sorgalla.com

今回僕が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タグが受けてくれるのでポップアップ表示してくれます。