LAB#001背景全体にYoutube動画を利用したページ作成[jquery-tubular]

はじめまして、たまにデザイナーのおかべんです。

閲覧環境の進歩によって、高速・大容量のデータ通信が可能になってきましたね。
背景全体に動画を表示して、インパクトあるページ作成をする場合、今でもFlashを利用しているサイトも存在しますが、実際作成するとなると、スマートフォン等デバイス対応も必要だし、少し効率が良くなかなぁと(個人的にはAS3.0好きだったけど)

という事で記念すべき【CREATIVE LAB#001】は、
背景全体にYoutube動画を利用したページ作成[jquery-tubular]
をさくっと実装してみようと思います。

またシリーズ化しますので、全3回を予定。
LAB#002:背景動画にアミ掛けをいれてより実践的に!
LAB#003:閲覧環境まで考慮して処理を変えよう!

ちなみに[jquery-tubular]はMIT Licenseだよ!やったね!
(ちゃんと守れば商用利用可)

実装サンプル
https://www.creative-web.co.jp/lab/001/
※ちなみに動画は自分で遊びで作ったもの

STEP1

https://code.google.com/p/jquery-tubular/downloads/list
からjquery.tubular.jsをダウンロード

STEP2

<head>内へ必要なjQueryと jquery.tubular.jsを読み込みます。

[js]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.tubular.1.0.js" type="text/javascript"></script>
[/js]

STEP3

<head>内へtubularを実行する記述をします。※もちろん外部ファイル化OK
videoIdにはYoutubeの動画IDをいれます。
赤文字の部分:http://www.youtube.com/watch?v=gbIyfJ67hB0

[js]
<script>
$().ready(function() {
$(‘#wrapper’).tubular({videoId: ‘gbIyfJ67hB0’});
});
</script>
[/js]

STEP4

先ほど設定した要素IDを内へ記述します。

[html]
<div id="wrapper"></div>
[/html]

これだけで画面全体へ表示する部分は完成!

以下はサンプルのソース
[html]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル|背景全体にYoutube動画を利用したページ作成[jquery-tubular] CREATIVE LAB#001</title>
<style>
body{margin:0;padding:0;border:0;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script>
$().ready(function() {
$(‘#wrapper’).tubular({videoId: ‘gbIyfJ67hB0’});
});
</script>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
[/html]