Lity を使った Youtube 動画再生

Lity とは？

Lity とは、Web サイト上で画像や動画、インラインコンテンツなどをポップアップ表示させることができる jQuery ライブラリのこと。重くなりがちな jQuery のなかでは比較的軽めな設計のうえ、簡単な操作でコンテンツをポップアップできる。

弊社では、以前、 jQuery を使わないで Youtube 動画を埋め込み高速化している。
このページと見比べてどちらが使い勝手がいいか、ご自身の環境に合わせて判断してください。

Lity を使って動画を埋め込む手順

ファイルをダウンロードする

まず、公式サイトから、 Lity の zip ファイルをダウンロードして解凍し、その中から「lity.min.js」 と「lity.min.css」の２つのファイルをローカル PC の任意の場所に保存する。
Lity は、jQuery が必須となる。jQuery の読み込みは、 CDN（Content Delivery Network）を利用する方法と、ファイルをダウンロードする方法の２種類がある。
jQuery を CDN から使う！リンク先や読込み方法の違いを解説が CDN 利用について詳しく解説している。

CDN を利用する場合は、jQuery 公式で紹介されている CDN から、「jQuery Core 3.7.1」の「minifiled」を選んで、表示されたコードをコピーし、サイト HTML の head タグ内に貼り付ける。

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

CDN の jQuery の読み込みコードを書き終わったら、これ以降の工程のうち、jQuery ファイルのダウンロードと保存、jQuery ファイル読み込みのコードを書く作業が不要になる。

ファイルをダウンロードする場合は、jQuery の公式サイトで「Download the compressed, production jQuery x.x.x」をクリックし、ダウンロードしたファイルをローカル PC の任意の場所に保存する。

ファイルを読み込むコードを書く

サイト HTML の head タグ内に「jquery.js」ファイルと「lity.min.js」ファイルと、「lity.min.css」ファイルを読み込むコードを書いていく。

<script src="jquery.js の場所を指定"></script>
<script src="lity.min.js の場所を指定"></script>
<link rel="stylesheet" href="lity.min.css の場所を指定"></link>

script/link タグのパスは、 HTML ファイルと jQuery/Lity のファイルの階層構造に合わせてそれぞれ指定する。
このとき、 jQuery の読み込み→ Lity の読み込みという順番でないと正常に動作しなくなるため、 CDN を利用した場合ファイルをダウンロードした場合問わず、必ず jQuery の読み込みコードを、 Lity の読み込みコードよりも先に書く必要がある。

A タグに data-lity 属性を追加する

ここまでの準備ができたら、あとは A タグに data-lity 属性を追加するだけで動画がポップアップ表示されるようになる。

Youtube 動画の URL は、共有→埋め込みをクリックした際に表示されるコードの src 属性値（"https://www.youtube.com/embed/～” から始まる URL）をコピーして使うのがよいだろう。

<a href="https://www.youtube.com/embed/～" data-lity>

data-lity の値は指定しなくても起動するようなので、今回は特に指定しないでおく。

Lity で Youtube 動画再生に似せてみた

試しに Lity を使って、検索順位チェックツールの使い方動画を埋め込む。しかし、ただ Lity を埋め込むだけだと再生ボタンがなく YouTube 動画っぽくはならないため、サムネイルと再生ボタンを追加し、できるだけ Youtube に似せるようにした。

再生ボタンを表示する部分は

を参考．
実際のコードについては、以下に記載。sddefault は default, mqdefault, hqdefault, sddefault, maxresdefault など画像サイズを適切に選択する。

<div class="lity_yt">
  <a href="youtube の URL" data-lity>
    <img class="lity_thumb" alt="動画の説明" src="//img.youtube.com/vi/動画ID/sddefault.jpg" width="xxx" height="xxx">
  </a>
</div>
<style>
.yt {
  position: relative;
}
.lity_yt::before {
  position: absolute;
  background: url(/images/yt_icon_mono_light.png);
  content: "";
  background-size: 100%;
  width: 70px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .90;
  transition: .5s;
}
.lity_yt:hover::before {
  background-image:url(/images/yt_icon_rgb.png);
}
</style>

CSS 部分は lityyt.css としておいてあるので使ってください．
その場合は以下のようになります．

<link href="/css/lityyt.css" rel="stylesheet" type="text/css">
<div class="lity_yt">
  <a href="youtube の URL" data-lity>
    <img class="lity_thumb" alt="動画の説明" src="//img.youtube.com/vi/動画ID/sddefault.jpg" width="xxx" height="xxx">
  </a>
</div>