Help us understand the problem. What is going on with this article?

YouTube動画の埋め込みを軽くする

More than 3 years have passed since last update.

YouTube動画の埋め込みコード。
サイトに複数貼り付けると重い。でも貼り付けたい。
そんな埋め込みコードを、自動でサムネイル画像に置換することで軽くする方法です。
JavaScript(jQuery)を使用します。

軽くする方法

基本はこちらの記事のコードを使用させていただきました。
http://qiita.com/yuyaonrails/items/5ecb24fca0d54abccdab

それに加えて、

  • widthとheightも取得する
  • 動画埋め込みオプションの「動画が終わったら関連動画を表示する」をOFFにする(URLパラメータが加わるので上記コードだとサムネイルが取得できない)
  • サムネイルにYouTube公式のアイコンを付けて、通常の埋め込みと同じような見た目にする

コード

HTML
<!-- YouTubeの埋め込みコードをdivで囲む(複数貼り付ける時も動画1つずつ囲む) -->
<div class="youtube">
<iframe width="320" height="180" src="https://www.youtube.com/embed/動画ID?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.youtube {position:relative;}/* ラッパー */
.youtube_play:hover {cursor:pointer;}/* サムネイル */
.youtube_btn {/* YouTubeアイコン */
/* アイコンの画像とサイズ指定 */
width:42px;
height:30px;
background-image:url(マウスが乗っていない.png);
/* 上下左右中央へ配置 */
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}

JavaScript
$(function (){
 var movies = [];
 var movies_w = [];
 var movies_h = [];
 var images = [];

 $('.youtube iframe').each(function(index, element) {
      //属性を取得
      var movie_src = $(this).attr('src');
      var movie_width = $(this).attr('width');
      var movie_height = $(this).attr('height');
      //配列へ
      movies[index] = movie_src
      movies_w[index] = movie_width
      movies_h[index] = movie_height
      //サムネイルを取得(この場合は320x180)
      images[index] = 'http://i.ytimg.com/vi' + movie_src.substring(movie_src.lastIndexOf("/"),movie_src.lastIndexOf("?")) + '/mqdefault.jpg'
      //置き換え
      $(this).after('<div class="youtube_play"><img src="' + images[index] + '" width="' + movies_w[index] + '"><div class="youtube_btn"></div></div>').remove();
 });

 $('.youtube_play').each(function(index, element) {
      $(this).click(function(){
      //クリックで置き換え
      $(this).after('<iframe src="' + movies[index] + '&amp;autoplay=1" width="' + movies_w[index] + '" height="' + movies_h[index] + '" frameborder="0"></iframe>').remove();
      });
      $(this).hover(function(){
      //ロールオーバー
      $(".youtube_btn").eq([index]).css("background-image","url(マウスが乗っている.png)");
      },function(){
      $(".youtube_btn").eq([index]).css("background-image","");
      });
 });
});

YouTubeアイコン

こちらからダウンロードできる
https://www.youtube.com/yt/brand/ja/downloads.html

注意

  • URLパラメータ無しの場合はコード修正が必要
  • スマホの場合、自動再生が不可能なので2回タップしないと再生できない
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away