プログラミング

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

 

こんにちは！

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

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;
    }
}

 

<iframe>の埋め込みコードの上にaタグ（data-lity）を重ねて、<iframe>を覆っている状態です。これで見た目は通常のYouTube埋め込みですが、クリック判定はaタグが受けてくれるのでポップアップ表示してくれます。

まとめ

・lity.jsを使えば簡単に画像や動画のポップアップ表示が可能
・YouTubeの埋め込みコードをポップアップさせるには一手間必要

RELATED POST