今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. select要素の複数選択フォームを実装「Multiple Select」
  3. 動画のポップアップLightbox「Video Lightning」
  4. テーブルやリストから文字列を検索「QuickSearch」
  5. ソート・フィルター・ページャー付きのテーブル「Datatable」

動画のポップアップLightbox「Video Lightning」

スポンサーリンク

動画のポップアップLightboxを簡単にサイトへ設置するjQueryプラグイン「Video Lightning」を紹介します。

jQueryプラグイン「Video Lightning」

このプラグインの特徴は、「YouTube」や「Vimeo」といった動画のポップアップLightboxを簡単に設置できることです。

クリックアクションで、動画のLightboxがポップアップされ、同時に背景は暗くなり、動画がはじまります。まるで、自分のサイトが映画館のように……ちょっと言い過ぎましたが……便利なプラグインです。

スポンサーリンク

デモのテキストリンク「YouTube」をクリックすると動画Lightboxがポップアップされます。試してみてください。

「Video Lightning」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>jQuery Video Lightnings - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" href="jquery-video-lightning.css">
</head>
<body>
<h1>jQuery Video Lightningsのデモでーす。</h1>
<p>クリック! → <span class="video-link" data-video-id="y-HttdxjYK7EQ">Youtube</span></p>

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="jquery-video-lightning.js"></script>
<script>
    $(function() {
        $(".video-link").jqueryVideoLightning({
            autoplay: 1,
            color: "white"
        });
    });
</script>

</body>
</html>

jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» Video Lightning

スポンサーリンク

関連記事(一部広告含む)