IDを指定だけでYoutubeをポップアップで表示するjQueryプラグイン「modal-video.js」

YoutubeやVimeoの動画をポップアップで表示したい時に便利なjQueryプラグインです。

特徴

  • classと動画IDを指定するだけ
  • Youtubeの動画オプションに対応

デモ

See the Pen
poNXNRj
by kura (@kuranopen)
on CodePen.

使い方

1. ダウンロード

modal-video.jsからZIPをダウンロードし、JavascriptとCSSを読み込みます。

2. Javascript、CSS読み込み


<!-- CSS -->
<link rel="stylesheet" href="/css/modal-video.min.css" />

<!--  Javascript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<script src='/js/jquery-modal-video.min.js'></script>

3. 実行コード記述(Youtube)

HTML

<button class="js-modal-btn" data-video-id="kVxTrhojpFI">Open Youtube</button>

Javascript

$(".js-modal-btn").modalVideo();

3. 実行コード記述(Vimeo)

HTML

<button class="js-modal-btn" data-video-id="259411563">Open Vimeo</button>

Javascript

$(".js-modal-btn").modalVideo({channel: "vimeo"});

オプション

Youtube APIプションVimeo API オプションを指定できます。

  • このエントリーをはてなブックマークに追加