Tubular
YouTubeの動画を背景に DEMO
ここでは jQuery Tubularというプラグインを使って実現します。
この事例はローカルでは動作しません。サーバーにアップしてお試し下さい。
準備
- 1）jQuery Tubularをダウンロード
http://www.seanmccambridge.com/tubular/ から最新版をDLして下さい。
必要なのは jquery.tubular.xxxx.js だけです。
- 2）構成ファイルの確認（ファイルは以下のように構成します。）
- index.html
- css（フォルダ） / style.css
- js （フォルダ）/ jquery-xxxxx.min.js jquery.tubular.xxxx.js sample.js
注) xxxxx の部分（バージョン）は、書きかえが必要です。
HTML
要点のみ記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="js/jquery-xxxxx.min.js"></script>
<script src="js/jquery.tubular.xxxx.js"></script>
<script src="js/sample.js"></script>
<link rel="stylesheet" href="css/style.css">
<title>Sample Page</title>
</head>
<body>
<div id="container">
：
以下省略
CSS
要点のみ記載します。
*{
margin:0;
padding:0;
}
#container {
position: relative;
width: 100%;
height: 100%;
：
background-color: rgba(255,255,255,0.2);
/* 例）コンテナの背景は20%半透明 */
}
JavaScript
$(function(){
$('document').ready(function() {
var options = { videoId: '動画のID'};
$('#container').tubular(options);
});
});
- 動画のIDは、YouTube動画再生時のURLの v= の後の文字列です。
- $('#container').tubular(options); という記述の中の #container の部分がターゲット要素です。この領域に背景動画が表示されます。
- 音の On/Off 他、いくつかのオプションがあります。
複数のオプションを列挙する場合は、以下のルールです。var options = { videoId: '動画のID', mute: false, ・・};
- コントローラーの追加
以下のソースを加えるだけで、画面にコントローラーが表示され、それぞれが機能します。スクリプトの追加は不要です。<p id="video-controls" class="black-65"> Video controls:<br /> <a href="#" class="tubular-play">Play</a> | <a href="#" class="tubular-pause">Pause</a> | <a href="#" class="tubular-volume-up">Volume Up</a> | <a href="#" class="tubular-volume-down">Volume Down</a> | <a href="#" class="tubular-mute">Mute</a> </p>