©2022- web-developer-note.com

【JavaScript】lity.jsを使ってYoutbe動画をポップアップ表示する方法

【JavaScript】lity.jsを使ってYoutbe動画をポップアップ表示する方法

ウェブサイトにYouTube動画を埋め込む際、ユーザー体験を向上させるために動画をポップアップ表示する方法があります。lity.jsは、軽量で使いやすいJavaScriptライブラリで、モーダルウィンドウ（ポップアップ）を簡単に実装できます。本記事では、CSSとlity.jsを使用してYouTube動画をポップアップ表示する方法を、具体的なコード例とともに詳しく解説します。

lity.jsとは

lity.jsは、軽量で使いやすいJavaScriptライブラリで、モーダルウィンドウ（ポップアップ）を簡単に実装できます。特に、動画や画像、HTMLコンテンツをポップアップ表示する際に便利です。lity.jsを使用することで、ユーザーがリンクをクリックすると、背景が暗くなり、指定したコンテンツが中央に表示されるインタラクティブな体験を提供できます。

主な特徴:

  • 軽量で高速
  • シンプルなHTML構造
  • カスタマイズ可能なスタイル
  • アクセシビリティに配慮

必要なライブラリのインクルード

lity.jsを使用するためには、以下のライブラリをHTMLファイルにインクルードする必要があります。

lity.min.css

lity.jsのスタイルシート。モーダルウィンドウの基本的なデザインを提供します。カスタムが必要な場合はカスタムcssファイルより前に設置してください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.css">

lity.js

lity.jsのメインスクリプト。モーダルウィンドウの機能を提供します。lity.jsはjQueryに依存するため、jQueryより前に設置してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.js"></script>

CodePen ソースコードサンプル

オーバーレイなどわかりやすく見る為には直接CODEPENをにアクセスしてみてください。

ここをクリック↓

基本的なHTML構造

YouTube動画をポップアップ表示するための基本的なHTML構造は以下の通りです。

<div class="video">
  <div class="youtubeThumbnail">
    <img src="https://img.youtube.com/vi/hQN45euU6_I/maxresdefault.jpg" alt="動画タイトルを入れてください" width="実寸を入れてください" height="実寸を入れてください" loading="lazy" class="imgauto">
    <a href="https://www.youtube-nocookie.com/embed/hQN45euU6_I?controls=0&autoplay=1" data-lity></a>
  </div>
</div>

解説:

  • ２箇所のhQN45euU6_Iはyoutube動画のIDです
  • aタグにdata-lity属性を付与することで、クリック時にポップアップが開きます。

youtube動画のIDはアドレスバーの末尾にあります。

使用しているリセットクラスについて:

imgauto

当ブログではimgタグに対して以下のリセットを行っております。

img{
	height: auto;
	max-width: 100%;
	box-sizing: unset;
	vertical-align: bottom;
}
.imgauto{
	height: auto;
	width: 100%;
	box-sizing: unset;
	line-height: 1rem;
	display: block;
}

自動再生について

urlにautoplay=1パラメーターを付与する自動再生されます。
ただし、モバイル端末は自動再生非対応です。
この仕様はIFrame Player API のドキュメントにその理由が記載されてます。

CSSでのスタイリング

動画サムネイルとポップアップリンクをスタイリングするためのCSSコードは以下の通りです。コピペでそのまま使えます。

.video{
  width: 80%;
  margin-inline: auto;
}
.youtubeThumbnail{
  position: relative;
}
.youtubeThumbnail a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.youtubeThumbnail a::before{
  content: "";
  display: inline-block;
  background: #fff;
  aspect-ratio: 197/150;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.youtubeThumbnail a::after{
  content: '';
  display: inline-block;
  --MASK: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDM5MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDM5MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRjAwMDA7fQo8L3N0eWxlPgo8ZyBpZD0i44Os44Kk44Ok44O8XzFfMDAwMDAwNzQ0MDA4NzMyNzkxMzU5NDUyNDAwMDAwMDY2OTQ1NTcxMzQ4ODYzMzkyMjNfIj4KCTxnIGlkPSJfMiI+CgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTQ4Mi43LDM3LjhDNDU2LjUsMTYuNiwzNjQsMCwyNTYsMFM1NS41LDE2LjYsMjkuMywzNy44QzUuMiw1Ny4yLDAsMTQ1LjEsMCwxOTVzNS4yLDEzNy44LDI5LjMsMTU3LjIKCQkJQzU1LjUsMzczLjQsMTQ4LDM5MCwyNTYsMzkwczIwMC41LTE2LjYsMjI2LjctMzcuOEM1MDYuOCwzMzIuOCw1MTIsMjQ0LjksNTEyLDE5NVM1MDYuOCw1Ny4yLDQ4Mi43LDM3Ljh6IE0zMzIuOCwxOTcuNEwyMTQsMjY4LjMKCQkJYy0wLjksMC41LTEuOSwwLjUtMi44LDBjLTAuOS0wLjUtMS40LTEuNC0xLjQtMi40VjEyNC4xYzAtMSwwLjUtMS45LDEuNC0yLjRjMC45LTAuNSwxLjktMC41LDIuOCwwbDExOC44LDcwLjkKCQkJYzAuOCwwLjUsMS40LDEuNCwxLjQsMi40QzMzNC4yLDE5NiwzMzMuNywxOTYuOSwzMzIuOCwxOTcuNHoiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K) no-repeat center center / 100%;
  mask: var(--MASK);
  -webkit-mask: var(--MASK);
  background-color: #FF0000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 197/150;
}
@media (hover: hover){
  .youtubeThumbnail a:hover{
    opacity: 1;
  }
  .youtubeThumbnail a::after{
    transition: .3s;
  }
  .youtubeThumbnail a:hover::after{
    background-color: #4B4B4B;
  }
}
@media screen and (min-width: 768px){
  .youtubeThumbnail a::before{
    width: 50px;
  }
  .youtubeThumbnail a::after{
    width: 90px;
  }
}
@media screen and (max-width: 767px){
  .youtubeThumbnail a::before{
    width: 30px;
  }
  .youtubeThumbnail a::after{
    width: 60px;
  }
}

ポイント

  • .youtubeThumbnail a::beforeに視覚的な再生ボタンを設置し、再生できることをわかりやすくします。
  • Data URIアイコンについては以下の記事を御覧ください。
Data URIを使ってSVGアイコンを軽量化する方法

Data URIを使ってSVGアイコンを軽量化する方法

ウェブデザインにおいて、アイコンはユーザーインターフェースの視覚的な魅力と機能性を高める重要な要素です。特に、SVG（Scalable Vector Graphics）は、その拡張…

よくある問題と解決策

ポップアップが開かない

原因:

  • data-lity属性が正しく設定されていない。
  • lity.jsのライブラリが正しくインクルードされていない。

解決策:

  • <a>タグにdata-lity属性が付与されているか確認。
  • lity.jsのCSSとJavaScriptが正しくインクルードされているか確認。
<a href="https://www.youtube-nocookie.com/embed/hQN45euU6_I?controls=0&autoplay=1" data-lity></a>

動画が正しく表示されない

原因:

  • YouTubeの埋め込み設定が無効になっている。
  • 動画IDが正しくない。

解決策:

  • YouTube動画の設定で「埋め込みを許可」に設定されているか確認。
  • 動画IDが正しいYouTube動画のIDであることを確認。

まとめ

CSSとlity.jsを使用してYouTube動画をポップアップ表示する方法を、具体的なコード例とともに解説しました。lity.jsを活用することで、ユーザーにインタラクティブで魅力的な動画体験を提供できます。以下のポイントを押さえて、効果的な動画ポップアップを実現しましょう。

  • ライブラリのインクルード: lity.jsのCSSとJavaScript、およびjQueryを正しくインクルード。
  • HTML構造の作成: YouTube動画のサムネイルとポップアップリンクを適切に配置。
  • CSSスタイリング: 再生ボタンやポップアップリンクをスタイリングし、ユーザーに視覚的なフィードバックを提供。

YouTube動画のポップアップ埋め込みは、ウェブサイトのユーザー体験を向上させ、SEOにも好影響を与えます。この記事で紹介した方法を参考に、ぜひ自身のウェブサイトで実装してみてください。補足: 複数の動画を埋め込む場合や、カスタムデザインを適用する際は、個々のニーズに合わせてCSSを調整してください。

この記事をシェアする
JavaScriptの一覧を見る

どなたでもコメントや質問をどうぞ

スパム対策のため、承認作業を行うまでは表示されません。ご了承ください。

CAPTCHA


関連記事