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：サンプル