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 オプションを指定できます。

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選