ColorFullWeb

カラーがフルな情報配信ブログ。Web関係多め。

[¢]【コピペ】デザイナーが30分でYoutubeを背景に表示する【jQuery】

time 2013/11/27

youtube

チータラうまい!どうも、ColorFullWebです。

今回はjQueryでYoutubeを全画面背景として使います。

30分くらいでできますし、
コードはコピペするだけなので楽しんでやってみてください。

まずはプラグインをダウンロード

使うjQueryプラグインは「jquery-tubular」
ここからダウンロード

フォルダを解凍して設置

解凍したら試しにフォルダごと設置してみます。
Xamppとかテスト用のサーバー内でしか動作しませんのでご注意。

コードをコピペするだけ

解凍フォルダ内の直下、「index.html」を以下のコードに丸ごと変更。
コピペで動きます。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>背景動画-CFW</title>



	<link href="css/screen.css" rel="stylesheet" type="text/css" /> 



	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
    <script>
    ;(function($) {
	    $('document').ready(function() {
	    	var options = {
	    		//オプション設定
	    		ratio: 16/9, //動画縦横比
	    		videoId: 'q2yQBrW02yA', //動画ID
	    		mute: false,//ミュート
	    		repeat: true,//リピート
	    		width: $(window).width(),//動画サイズ
	    		wrapperZIndex: 99,//z-index
	    		playButtonClass: 'tubular-play',//プレイボタン
	    		pauseButtonClass: 'tubular-pause',//ポーズボタン
	    		muteButtonClass: 'tubular-mute',//ミュートボタン
	    		volumeUpClass: 'tubular-volume-up',//ボリュームボタン
	    		volumeDownClass: 'tubular-volume-down',//ボリュームボタン
	    		increaseVolumeBy: 40,//ボリュームボタンを押した際のふり幅
	    		start: 0//スタート位置秒数指定
	    	};
	    	//動画表示場所指定
	    	$('#ColorFullWrap').tubular(options);
	    });
	})(jQuery);
    </script>
</head>





<body>
	<div id="ColorFullWrap">
			<div class="nakami">
				<h1 class="ookii">ColorFullWeb</h1>
				<h2 class="ookii">Design<br>for<br>LIFE.</h2>
				<p>
					color-full-web.com<br>
					Twitter : @i_saku39<br>
					<a href="http://www.youtube.com/watch?v=q2yQBrW02yA" target="_blank">Go_Youtube ></a>
				</p>
				<div class="menyuuu">
					<a href="#" class="tubular-play">Play</a>
					<a href="#" class="tubular-pause">Pause</a>
					<a href="#" class="tubular-mute">Mute ON/OF</a>
					<a href="#" class="tubular-volume-up">Volume-up</a>
					<a href="#" class="tubular-volume-down">Volume-down</a>
				</div>
			</div>
	</div><!-- #ColorFullWrap -->
</body>





<style>
/*-------------------------おまけCSS*/
/*-------------------------プラグイン使用には特に関係なし*/
*{
	font-family:"メイリオ", Meiryo, osaka,"MS Pゴシック", Helvetica, Arial, Verdana, sans-serif;
	letter-spacing: 5px;
}
h1{
	margin: 20px 0 -10px 0;
}
.menyuuu a{
	width: 200px;
	display: block;
	margin: 10px 0 0 5px ;
	font-size: 20px;
	background-color: #fff;
	color: #999;
	border-radius: 5px;
	padding: 10px 20px;
	text-decoration: none;
}
p{
	font-weight: bold;
	line-height: 40px;
	font-size: 20px;
	color: #fff;
	text-shadow: 0 0 5px rgba(0,0,0, 0.6)
}
.nakami{
	margin: 30px 0 0  30px;
	border-radius: 5px;
	display: inline-block;
	opacity:0.4;
	-ms-filter: "alpha(opacity=40)";/*for ie 8 */
}
.ookii{
	font-size: 80px;
	line-height: 100px;
	text-shadow: 0 0 10px rgba(0,0,0, 0.8);
	letter-spacing: 20px;	
}
</style>



</html>

動画を使う際のポイント

最低限こんなことに気をつけて使いたいなって個人的には思います。

  • 動きがある程度ないとダサい
  • 画像が荒れてもある程度オシャレ感が出るような動画を使う
  • できればオーバーレイ画像を用意してあげると画像が荒れても質感が出ます(ドットの画像をオーバーレイしてあげるといい感じ)

使いどころがなさそうに見えるけど。。。

ベンツとかでも使われてるギミックなのです。

NEXT A-Class|メルセデス・ベンツ日本公式サイト

超クール!


バチッと決まるとすごい最高にかっこいいので覚えておきたいですよね。

jQueryプラグイン「jquery-tubular」について詳しく知りたい人はドキュメントを読むのもアリだと思います。
プラグインの中身のコードもそんなに長くないので読んでみても良いかと。

facebookはコチラ。(;´Д`)ノヨロソクネ

down

コメントする