今日の人気記事

  1. 指定した要素を点滅「Modern Blink」
  2. 自動的にスクロールバーが隠れる「Scroll Fade」
  3. 入力に応じてテキストエリアの高さを調節「Autosize」
  4. ブラウザーをフルスクリーン(全画面)表示に「Fullscreen」

動画のポップアップ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

スポンサーリンク

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