Lity を使った再生ボタン付き Youtube 動画再生

最終更新日:2024年04月17日公開日:2024年3月29日 2024年03月

1. Lity とは
2. Lity を使って動画を埋め込む手順
3. Lity で Youtube 動画再生をつくる
4. スタイルシートのソースコード

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 は、動画 ID の含まれるものであれば使用できる。今回は、共有→埋め込みをクリックした際に表示される URL （"https://www.youtube.com/embed/xxxxxxxxxxx” ）を使ったが、そのまま通常のURLを挿入しても動く。(https://www.youtube.com/watch?v=xxxxxxxxxxx)

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

Lity で Youtube 動画再生をつくる

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

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

Youtube 動画の埋め込みで遅いページの高速化

Youtube の複数の動画を埋め込むとページ自体が非常に遅くなる(重い)時の高速化(軽量化)の方法．原因は iframe で各動画を読み込みに行くため．「youtube

https://www.rectus.co.jp/archives/299

2019/10/29

を参考。

実際のコードについては、以下に記載。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>