YouTubeの埋め込み動画をページと一緒に読み込ませない方法

 埋め込んだYouTubeの動画をページ読み込み時に処理させると重いので、対処法。
 「YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法」をヒントに、もっと簡単になるように作ってみた。

 動画を埋め込む場所にダミーのサムネイル画像を設定しておき、クリックした時に埋め込みコードに入れ替えて自動再生させる。単純だけどナイスアイディアですよほんとこれ。

 
【HTML】

<div class="movie">
	<div class="thumb">動画1</div>
	<div class="thumb">動画2</div>
	<div class="thumb">動画3</div>
</div>

※「動画○」の部分はサムネイル画像を入れるなり画像置換で設定するなり。
※スマホではオートプレイ設定にしていても再生されず、2回タップが必要になってしまうので切り分け。
※埋め込みコードのパラメータは必要に応じて変更。ただしautoplay=1は必須。

 
【動画が一つの場合のJS】

var agent = navigator.userAgent;
if (agent.indexOf('iPhone') > 0 || agent.indexOf('iPod') > 0 || agent.indexOf('Android') > 0) {
	$('.movie .thumb').hide().parent().html('<iframe width="776" height="436" src="http://www.youtube.com/embed/(動画URL)?rel=0&modestbranding=1&showinfo=0&disablekb=1&autoplay=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>');
} else {
	$('.movie .thumb').click(function(){
		$(this).hide().parent().html('<iframe width="776" height="436" src="http://www.youtube.com/embed/(動画URL)?rel=0&modestbranding=1&showinfo=0&disablekb=1&autoplay=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>');
	});
}

 
【動画が複数の場合のJS】

var agent = navigator.userAgent;
if (agent.indexOf('iPhone') > 0 || agent.indexOf('iPod') > 0 || agent.indexOf('Android') > 0) {
	var movie = ['(動画URL1)','(動画URL2)','(動画URL3)'];
	$('.movie .thumb').each(function(i) {
		$(this).click(function(){
    			$(this).hide().parent().html('<iframe src="http://www.youtube.com/embed/'+movie[i]+'?rel=0&modestbranding=1&showinfo=0&disablekb=1&autoplay=1&wmode=transparent" width="550" height="309" frameborder="0" allowfullscreen></iframe>');
		});
	});
}

YouTubeの埋め込み動画をウィンドウ内で全画面表示

 久々すぎる備忘録。
 本当は大量のメモがあるけど、いちいちここにまとめて載せるのが面倒で放置状態。
 ここに書いておくとどこからでも見られるので、使いそうなものは載せていかないとなー。

 YouTubeの埋め込み動画をウィンドウ内で全画面表示させる方法。可変対応。
 幅・高さ・絶対位置は動画の縦横比を見て、テストして適宜変更。
 ブラウザウィンドウを上回るサイズで動画を配置して、中央部分を切り抜き表示させる形。

 

○えいちてぃーえむえる

<div id="movie">
	<iframe width="1100" height="619"
src="動画URL?modestbranding=1&showinfo=0&autoplay=1&loop=1&playlist=bTlsMlJnAQ0&controls=0&disablekb=1&wmode=transparent"
frameborder="0" allowfullscreen></iframe>
</div>

 

○しーえすえす

#movie {
        width: 100%;
        min-height: 700px;
        overflow: hidden;
        position: relative;
}

#movie iframe {
        width: auto;
        height: auto;
        min-height: 150%;
        min-width: 150%;
        position: absolute;
}

 

○ジェイク英理

$(function() {
	function resizeMov() {
		var h = $(window).height();
		$('#top_movie').css({height: h+'px'});
		$('#top_movie iframe').css({left: '-25%',top: '-25%',height: h+'px'});
	}
	resizeMov();
	$(window).resize(resizeMov);
});