[jQuery]背景にYouTube動画を設定できるjQueryプラグイン – jquery-tubular
2013/09/13
一度使ってみたかったフルスクリーンで背景動画を表示させるjQueryプラグイン。
結構面倒かなと思ってましたが、YouTubeの動画なら簡単に背景に設定できて、
ほとんどのブラウザでも対応しているプラグインがあったので紹介します。
オリジナルのサンプルは先日iPhoneで撮影した稲光の映像です。画像粗いです^^;
サンプル
必要ファイル
ダウンロードしたZipファイルを解凍すると、
サンプルなどいろいろなファイルが入っています。
今回はjsフォルダの中にある「jquery.tubular.1.0.js」を使用します。
■jquery-tubular設置方法
jQueryとjquery.tubular.1.0.jsを読み込みます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.tubular.1.0.js"></script>
次に再生させる動画の指定をします。
<script type="text/javascript" charset="utf-8">
$(function(){
$('body').tubular({videoId: 'idOfYourVideo'});
});
</script>
スクリプト内の「idOfYourVideo」にはYouTube動画のIDを指定します。
YouTube動画のIDはYouTubeページURLの最後の部分になります。
例：http://www.youtube.com/watch&v=Spn7SJ53K3k
↑赤色表示の部分です。
これで設定終わりです！簡単すぎw
■jquery-tubular設置時の注意
- 背景動画にはz-indexが指定されています。
コンテンツを表示させるためにはz-indexの指定が必要になります。 - 幾つかのサイトを参考にすると、
header内の設定で「swfobject.js」やjquery-tubularをダウンロードした時に入っている「screen.css」を設定していますが、なくても大丈夫そうです。 - 対応ブラウザについてはie6以外の一般的なブラウザでは動作するようです。
GoogleChrome、FireFox、ie10で確認しましたが、問題ありませんでした。