【jQuery】背景いっぱいにYouTube動画を表示させる[jQuery Tubular]を紹介します。

Ads by Google

Logo Tubularウェブサイトにアクセスしたとき、背景全面に大きく動画が流れていると大変インパクトが強く、印象に残ります。
そこで今日は、サイトの背景にYouTubeの動画を表示・再生させることができるjQueryプラグイン[jQuery tubular]を紹介します。

プラグインのダウンロード

まずは下記の公式サイトより、[jQuery Tubular]のプラグインをダウンロードしてきます。

jQuery Tubular:ダウンロード

使い方

まずは HTML の <head>〜</head> 内にて、先にjQuery本体を、続いてダウンロードしてきた[jquery.tubular.js]を読み込みます。
続けて、[jQuery Tubular]の設定も記述します。

<script src="jquery.js"></script>
<script src="jquery.tubular.js"></script>
<script>
$(function(){
    $('document').ready(function() {
        var options = { videoId: 'OZDnWcf20kE'};
        $('#window').tubular(options);
    });
});
</script>

<body>〜</body> タグ内では、[id="window"]を指定したボックスを設置しておきます。

<body>
<div id="window">
</div>
</body>

このケースではHTML側で[id="window"]と指定した要素に対して背景動画を表示させています。
また、ウインドウいっぱいに表示させるために、CSSで width:100%;height:100%; を指定しています。
サンプルサイト以下からどうぞ。

jQuery Tubular:サンプル

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Recent Commentsこの記事へのコメント

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です