【youtubeを使用】youtubの動画を使用する場合

jQuery【baserjs】を使用して、
youtub動画の縦横比を固定のままでブラウザの横幅にぴったり合うよう可変表示し、無音でループさせました。

また、jQuery【jquery-video-lightning】を使用して、
「pop-up」の画像をクリックで、youtub動画をポップアップして音声付で再生させました。

2つのjQueryの紹介です。
DEMOページリンク：【youtubeを使用】TOPページに動画を入れる

用意するもの

• YouTubeのビデオID
• jQuery Plugin【baserjs】
• jQuery Plugin【jquery-video-lightning】
• HTML
• CSS

【baserjs】

まずは、【baserjs】の使用方法の説明から。
↓jQuery Plugin【baserjs】で出来ること。

• 動画を無音再生
• ブラウザの横幅で均等拡大縮小
• 操作パネル無

使用する「baser.min.js」は以下からダウンロード
GitHub – baserproject/baserjs

HTML
▼jSの読み込み

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/baser.min.js"></script>
<script>
$(function(){

//baserjsの記述
	$('.youtubeCover').bcYoutube({
		rel: false,
		autoplay: true,
		stopOnInactive: true,
		controls: false,
		loop: true,
		showinfo: false
	})
	.bcBackground();

	});

</script>

▼動画の読み込み位置の記述

<div id="sectionYoutube">
	<div class="youtubeCover" data-id="YouTubeのビデオID" data-width="1920" data-height="1080"></div>
</div>

CSS

/*Youtube
-------------------------------------------------- */
#sectionYoutube {
	width: 100%;
	height: 500px;/*今回高さは500px固定*/
	position: relative;
}
#sectionYoutube .youtube {
	overflow: hidden;
	width: 100%;
	height: 500px;/*今回高さは500px固定*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
#sectionYoutube .youtubeCover {
	width: 100%;
	height: 500px;/*今回高さは500px固定*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	overflow: hidden;
}

【jquery-video-lightning】

次に【jquery-video-lightning】の使用方法
↓jQuery Plugin【jquery-video-lightning】で出来ること。

• youtubeのポップアップ（lightboxで表示）

使用する「jquery-video-lightning.js」は以下からダウンロード
GitHub – musocrat/jquery-video-lightning: Turn any element into a lightbox or popover link for Youtube and Vimeo videos.

HTML
▼jSの読み込み

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery-video-lightning.js"></script>
<script>
$(function(){

//jquery-video-lightningの記述
	$(".video-link").jqueryVideoLightning({
		autoplay: 1,
		color: "white"
	});

</script>

▼ポップアップボタンの記述

<div class="video-link" data-video-id="YouTubeのビデオID"><img src="ボタン画像" alt="動画のポップアップ" width="ボタン画像の横サイズ" height="ボタン画像の縦サイズ"></div>

CSS

#sectionYoutube .video-link {
	width: 200px;/* ボタン画像の横サイズ*/
	height: 200px;/* ボタン画像の縦サイズ*/
	margin: -100px 0 0 -100px;/* 表示位置真ん中になるよう。ボタン画像のサイズの半分ずつネガティブマージン*/
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	overflow: hidden;
}
.video-target {
	cursor: pointer;
}

.video-wrapper {
	display: none;
	position: fixed;
	min-width: 100%;
	min-height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rbga(255,255,255,0.8);
	z-index: 21000;
}

.video-frame {
	position: absolute;
	top: 50%;
	left: 50%;
}

DEMO

DEMOページリンク：【youtubeを使用】TOPページに動画を入れる