埋め込みYoutubeのサムネイルのカスタマイズ

Youtube APIを使ってサムネイル画像をクリックで再生する方法です。コードは以下のようになります。コピペで使ってもらって構いません。

HTML

<div class="global_wrapper">
  <div class="youtube">
    <img
      src="./thumbnail.jpg"
      alt=""
      data-video="0tkzaClk6Ho"
      width="560"
      height="315"
      class="thumb"
    />
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/0tkzaClk6Ho?enablejsapi=1"
      frameborder="0"
      allowfullscreen
      autoplay
      playsinline
      class="movie"
    ></iframe>
  </div>
</div>

CSS

.global_wrapper {
  width: 560px;
  margin: 0 auto;
}

.youtube {
  position: relative;
  width: 560px;
  height: 315px;
}

.player {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

jQuery

$(function() {
  //Mobile判定
  var mobile = false;
  var ua = navigator.userAgent;
  if (
    ua.indexOf("iPhone") > 0 ||
    ua.indexOf("iPod") > 0 ||
    ua.indexOf("iPad") > 0 ||
    (ua.indexOf("Android") > 0 && ua.indexOf("Mobile") > 0)
  ) {
    mobile = true;
  }
  //スマホの場合muted属性追加
  if (mobile) {
    $("iframe").each(function() {
      $(this).attr("muted", "");
    });
  }
  $(".thumb").click(function() {
    var player = $(this).next("iframe")[0].contentWindow;
    player.postMessage('{"event":"command","func":"playVideo","args":""}', "*");
    $(this).hide();
  });
});

デモはこちら

Youtube側でも動画のサムネイルはカスタマイズできますが、Webサイト埋め込みではまた違うのを使いたかったりします。特に開発者側(ディベロッパー)ではYoutube動画自体のサムネイルを変えることが不可能の方が多いです。

そこで自前のサムネイル画像を用意し、それをクリックすると埋め込み動画が再生されるようにします。いくつかやり方はあると思うのですが、自分は次のような方法でやります。

Youtube APIの読み込みとHTMLとCSS

head内

<script src="https://www.youtube.com/iframe_api"></script>

<head>タグ内などにYoutube APIを利用するためのスクリプトを呼び出します。

body内

<div class="youtube">
  <img
    src="./thumbnail.jpg"
    alt=""
    data-video="0tkzaClk6Ho"
    width="560"
    height="315"
    class="thumb"
  />
  <div id="player1" class="player"></div>
</div>

<img>タグにdata属性を追加して、この中にYoutubeの動画IDを入れておきます。class="player"の<div>はYoutubeの動画を埋め込む枠になります。

CSS

.youtube {
  position: relative;
  width: 560px;
  height: 315px;
}

.player {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

動画用の枠とサムネイルをpositionで配置しています。

jQuery

//Mobile判定
var mobile = false;
var ua = navigator.userAgent;
if (
  ua.indexOf("iPhone") > 0 ||
  ua.indexOf("iPod") > 0 ||
  ua.indexOf("iPad") > 0 ||
  (ua.indexOf("Android") > 0 && ua.indexOf("Mobile") > 0)
) {
  mobile = true;
}

スマホかの判定をしています。スマホは自動再生に制限がある（後述）ので、挙動を切り分けています。

//Play
function onPlayerReady(event) {
  //スマホの場合はmuteを追加
  if (mobile) {
    event.target.mute();
  }
  event.target.playVideo();
}

Youtubeのプレイヤーが読み込まれたら実行する関数です。iOSの場合はmute関数を追加して音声をオフにした上で、動画を再生します。

//サムネイルをクリックしたら
$(".thumb").click(function() {
  //Youtubeの動画IDを取得
  var video_id = $(this).data("video");
  //埋め込む場所のidを取得
  var player_id = $(this)
    .next()
    .attr("id");
  //Youtube埋め込み
  player = new YT.Player(player_id, {
    height: "315",
    width: "560",
    playerVars: {
      playsinline: 1
    },
    videoId: video_id,
    events: {
      onReady: onPlayerReady
    }
  });
  //サムネイル非表示
  $(this).hide();
});

サムネイルをクリックしたら実行する関数です。まず.thumb（=imgタグ）に埋め込んだdata属性の中身を取得して動画IDをvar video_idに代入します。

続いてvar player_idで動画を埋め込む枠のid名を取得します。今回はサムネイルの次に動画用のdivタグを設置しているので、$(this).next().attr('id')でid名を拾ってます。ここはHTML構造に応じて変更してください。

そして、Youtubeのコンストラクタを作成し、オプションを配列で渡してあげます。先ほど取得した動画IDや枠のid名もここで使います。オプションの詳細については割愛しますが、細かい設定に関してはこちらに書いてあります。Youtube動画が枠内に作成され読み込みが完了すると、onPlayerReady関数が実行され、自動再生されます。

最後にサムネイルの表示をhide()で消します。

iframeを使ったバージョン

上記のYoutube APIを使ったやり方とは少し違う、通常の埋め込みiframeにpostMessageを使ってサムネイルをクリックすると再生はさせるやり方です。

CSSなどは先ほどのとほぼ同じで、枠の代わりにiframeのYoutube埋め込み動画を配置しています。スマホ判定も同様に入れてあります。少し注意したいのはiframeを読み込むURLの後ろに「?enablejsapi=1」を付ける点です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/0tkzaClk6Ho?enablejsapi=1" frameborder="0" allowfullscreen autoplay playsinline class="movie"></iframe>

さきほどと同様に音声オフを追加しますが、こちらはiframeの属性に追加します。

//スマホの場合muted属性追加
if (mobile) {
  $("iframe").each(function() {
    $(this).attr("muted", "");
  });
}

eachにしているのは複数のiframeを配置した時のためです。

$(".thumb").click(function() {
  var player = $(this).next("iframe")[0].contentWindow;
  player.postMessage('{"event":"command","func":"playVideo","args":""}', "*");
  $(this).hide();
});

サムネイルをクリックすると、iframeに対してpostMessageで再生の指令を送り動画が再生されます。そして、サムネイルを削除をします。

iframeの注意点

こちらの方法の注意点として、たくさんのiframeを配置すると初回の読み込みが重くなります。設置してある分だけ通信が発生するからです。それに対してAPIを使ったそのため、自分は最初のAPIを使ったやり方で作成しています。以下に比較のページがあります。

比較

スマホのYoutube自動再生について

PCの場合、muteを追加しなくても自動再生されますが、iOSの場合は音声オフをオフにしないと再生されません。つまり、サムネイルをタップしたあと、再度動画の再生ボタンを押さないといけない状況になり、これでは不便です。そのため、スマホ判定の処理を挟んでmuteを追加しています。

Androidの場合

Androidの実機で試したわけではないのですが、下記参考リンクにはAndroidでのYoutubeの自動再生はできないようです。ただし、Android Studioのエミュレータ（APIレベル26）の場合は再生されたので、機種やOSよってはできるのかも…？

スマホの自動再生の是非

スマホが何故自動再生に制限をかけているかと言えば、通信帯域が限られている中で動画のような大容量コンテンツを勝手に再生しないようにするためでしょう。いわゆる勝手に「ギガを食う」ことさせないためです。

自動再生の条件に消音としているのも、電車の中でWebサイト見ていたら突然音が流れ始めて周りのひんしゅくを買うの防ぐためでしょう。

そのためユーザーの意図しない動画の再生は避けるべきだと思います。動画を自動再生させる際にはユーザーを配慮し、特にスマホサイトの場合は良く検討しましょう。