背景全体に動画が流れてるサイトってインパクトありますよね。そこでそれを試してみようと思い今回は背景にYouTube動画を流せるjQueryプラグインのtubularを使ってみました。
ダウンロード
プラグインのサイトは以下です。早速サイトの背景に動画が流れています。
使い方
jQueryプラグインなので先にjQueryを読み込んだ後、以下のようにJSに記述します。
$(function(){
$('document').ready(function() {
var options = { videoId: 'OZDnWcf20kE'};
$('#wrap').tubular(options);
});
});
id=”wrap”に背景動画を指定しています。またウインドウいっぱいにするため要素にwidth: 100%;とheight: 100%;を指定しています。サンプルサイト以下から
オプション設定
音声を出す／ミュートにすることや、再生位置を変えるなどのオプション設定がありますので適宜変えて使用しましょう。配布サイトの「Options and defaults」の項目にあります。
対応ブラウザと確認時の注意
自分が見た限り、IE8～の他のブラウザ含む最新ブラウザで動きました。また確認時ですが、サーバーにアップしないと動かないので注意が必要です。
その他
あと調べている中で見つけたプラグインをメモしておこうと思います。こちらはmp4を再生してくれるものです。
他にも以下のページにまとまっています。動画ではなくて背景画像のものも混じっています。
コメント