About

YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

Share on FriendFeed
[`tweetmeme` not found]

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込むととっても重いんです。
具体的にいうと、youtubeの動画のリクエストがブラウザに過度の負担をかけるのです。

まあ、1つや2つならまだ平気なのですが、4つや5つ同時に貼り付けると、サイトを読み込むときに尋常じゃない重さを発揮します。

とくにIEだと、動画を読み込むまでほかの処理をとめてしまうため、JSの処理がとまって表示が崩れる場合があります。

ためしに見てみましょうか

動画を4つ読み込んだ例

画像は、リクエストがかかっているファイルを一覧にしたデータです。

WS000043

見てわかるように、すごい莫大なデータを読み込んでいます。
これではユーザに負担がかかってしまいます。
じゃあどうすれば軽くなるの?てかなるの?と思うと思いますが・・・・何とかなります!

まずは例をご覧ください。

動画を軽く読み込む例

画像を見ていただければ、いかに軽く、低リクエストでページが表示されているかわかると思います。

WS000044

方法としては、youtubeの動画を読み込む前に、動画をサムネイル画像(jpgなどに)置き換えてあげます。
そして、サムネイルをクリックするタイミングで、元のiframe(YouTubeの動画)に書き換えてあげます。

なぜサムネイルにするかというと、動画を再生する前は別にそこに動画がなくても、どんな動画かわかるサムネイルがあればいいじゃないですか。
例は分かりにくいですが、青いサムネイルをそれぞれ動画のキャプチャのサムネイルにしてあげれば、見た目は普通のYouTubeと同じになりますよね。

元のソース

<iframe width="560" height="315" src="//www.youtube.com/embed/rLdzyS5OHmA" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube.com/embed/xyL-G95QbzM" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube.com/embed/106shtmBID0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube.com/embed/PIAWhu8G-sM" frameborder="0" allowfullscreen></iframe>	

書き換えたソース

<img src="http://placehold.it/560x315/27709b/ffffff" class="youtube">
<img src="http://placehold.it/560x315/27709b/ffffff" class="youtube">
<img src="http://placehold.it/560x315/27709b/ffffff" class="youtube">
<img src="http://placehold.it/560x315/27709b/ffffff" class="youtube">	

まぁ、重い動画を読み込む前に画像にしちゃえ!ということなんですが。

今度は、サムネイル画像をクリックしたタイミングで、書き換え前のソースに戻してあげます。

$(function (){
	var youtube = new Array();
	var images = new Array(
		'http://placehold.it/560x315/27709b/ffffff',
		'http://placehold.it/560x315/27709b/ffffff',
		'http://placehold.it/560x315/27709b/ffffff',
		'http://placehold.it/560x315/27709b/ffffff'
	);
	
	$('iframe').each(function(index, element) {
		youtube[index] = $(this).attr('src');
		$(this).after('<img src="'+images[index]+'" class="youtube">').remove();
	});
	
	$('.youtube').each(function(index, element) {
		$(this).click(function (){
			var number = index;
			$(this).after('<iframe src="'+youtube[number]+'?autoplay=1" width="560" height="315"></iframe>').remove();
		});
	});
});

16行目のclickイベントで、クリックされたサムネイル画像だけ、iframeに戻すということをしています。
事前にiframeからsrcを配列に格納し、それを戻すという簡単な処理です。

3行目のimages配列は、サムネイル画像のパスを入れています。
これはもう少しスマートに行いたいですね・・・

とまあ、使える場所は限られると思いますが、ブログなどで大量の画像を張るサイトを運営してる方は、一度レスポンスを考えてみてはいかがでしょうか?

関連記事

no image

jQueryでロールオーバーを実装する2つの方法

世界中のakiファンの皆様、おはようございます。今回はjQueryで画...

記事を読む

みんなのアイドル「初音ミク」をブラウザ上で躍らせる「MMD.js」がktkr

はい・・・・タイトルひどいですね。 まぁそんなことはどうでもいいんで...

記事を読む

no image

チェックボックスやラジオボタンのデザインを簡単に変える方法(jQuery使用)

こんにちは、秋永です。 超久しぶりにjQuery案件で重いものがあり...

記事を読む

no image

今すぐ使える!?jQueryプラグイン紹介-part1-

はい、こんばんはです~ 3ヶ月ぶりですが、読者様は果たしているのだろ...

記事を読む

新着記事

no image

WordPressのアイキャッチのサイズを追加しても変更されないのは大体再生成すれば直る件

functions.phpでアイキャッチのサイズを変更する方法といえば...

記事を読む

bbpressのトピックスURLがループ内ですべて同じになってしまう場合の解消法

こんにちは。 今日はWordpressのプラグイン、bbpressの...

記事を読む

WordPressの管理画面をカスタマイズしよう!

最近趣味で「コミサ」というwebサイトを作ったのですが、これが会員サイ...

記事を読む

無料でデータベースも使えるサーバを紹介します!

最近趣味でサイトを運営したいなーと思った際に、このドメイン(ousia...

記事を読む

コメント/トラックバック (5件)

トラックバック用URL:

コメントフィード

  1. […] そのまま動画を埋め込んだところページのロードが重くなってしまったので blog.ousiadesign.net/javascript/youtube.html 上記のサイトを参考にして動画のサムネイルをクリックすると動画が再生さ […]

  2. […] そのまま動画を埋め込んだところページのロードが重くなってしまったので blog.ousiadesign.net/javascript/youtube.html 上記のサイトを参考にして動画のサムネイルをクリックすると動画が再生さ […]

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

  4. […] YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法 […]

  5. wordpressに掲載したyoutubeが重くて対策しようと思っております。

    $(function (){

    から始まるソースコードはどこに記載すればよろしいのでしょうか?
    申し訳ないのですが、ヒントだけでも教えて頂けるとうれしいです。

    よろしくお願い致します。




管理人にのみ公開されます

no image
WordPressのアイキャッチのサイズを追加しても変更されないのは大体再生成すれば直る件

functions.phpでアイキャッチのサイズを変更する方法といえば...

bbpressのトピックスURLがループ内ですべて同じになってしまう場合の解消法

こんにちは。 今日はWordpressのプラグイン、bbpressの...

WordPressの管理画面をカスタマイズしよう!

最近趣味で「コミサ」というwebサイトを作ったのですが、これが会員サイ...

無料でデータベースも使えるサーバを紹介します!

最近趣味でサイトを運営したいなーと思った際に、このドメイン(ousia...

no image
YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

→もっと見る

PAGE TOP ↑