Tweet

Pocket

YouTube側でも動画のサムネイルはカスタマイズできますが、Webサイトではまた違う画像にしてみたい・・という場合もありますよね。
（ない？いえそんな場合もあるはず。。）

自前のサムネイル画像を用意して、クリックするとYouTubeがオートプレイで再生されるようにしてみました。

また、モバイル対応も考えてデフォルトはミュート、レスポンシブ対応にしています。

YouTube APIを使ってサムネイル画像クリックで再生する方法（レスポンシブ対応）

1.jQueryとYouTube APIの読み込み

YouTube埋め込みといえばiframeで設置しますが、ミュート機能がiframeのオプション項目にないため、javascriptで制御が必要になります。

そのため今回はYouTube APIを利用します。

Head要素内にjQueryとYouTube APIを呼び出す下記スクリプトを入力します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>

2.HTMLとCSSでサムネイルとYouTubeを配置

HTML

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

タグにdata属性を追加し、YouTube IDを入れます。

CSS

.youtube_movie{
	position:relative;
	width:100%;
	padding-top:56.25%;
		}
.player {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
}

.thumb{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
		
.youtube_movie iframe{
	position:absolute;
	top: 0;
	left: 0;
	width:100% ;
	height:100% ;
}

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

z-indexでサムネイル画像を動画の上に表示されるように設定。

枠のレスポンシブは、横幅は100%として、高さをpaddingで確保します。
動画比率16：9の場合、paddingは56.25%になります。

3.jQueryでミュート機能・サムネイルクリック後再生を設定

jQueryでデバイスがスマホかどうか判定します。

Javascript

//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;
 }

YouTubeが読み込まれたら再生を開始します。スマホの場合はmute関数を追加してミュートの状態で再生します。

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

次に、サムネイルをクリックしたら動画再生を開始する関数です。

$('.thumb').click(function() {
    //Youtube埋め込み
    player = new YT.Player('player1', {
      height: '100%',
      width: '100%',
      playerVars: {
		  autoplay: 1,//オートプレイ
		  rel: 0,//関連動画表示オフ
        　playsinline: 1
      },
      videoId: 'YouTube ID',
      events: {
        'onReady': onPlayerReady,
      }
    });
    //サムネイル非表示
    $('.thumb').hide();
  });
});

.thumbのdata属性を取得して動画IDを代入します。

次に埋め込む場所のid名を取得します。サムネイルの直後に
<div id=”player”>を置いているので $(this).next().attr(‘id’)としてid名を取得しています。

そしてnew YT.Player()で再生方法をオプションを使って設定します。

レスポンシブ対応なので、width・heightは100%、関連動画を非表示にするrel=0を設定しました。

APIで設定できる他のオプションに関しては下記を参照ください。
https://developers.google.com/youtube/iframe_api_reference?hl=ja

最後サムネイルをhide()で隠しています。

＞＞＞デモサイトはこちら
デモサイトの動画は昨年行った沖縄で娘が参加したシーウォークの映像です。

※沖縄旅行についてのブログも書いていますので、よかったら合わせてお読みください。

まとめ

スマホを電車の中で見ていて突然お互が出てしまわないようにデフォルトでミュートをかけておくと親切です。

また、サムネイルをクリックしないと再生しないようにすることも、動画再生は容量を多く使うため、外出先での自動再生を避ける方法にもなります。

サムネイルを使わずオート再生しないように設定するだけでもいいです。

APIオプションやjQueryを使ったりiframeで埋め込むより少し複雑ですが、動画再生は周りに配慮した設計にしたいですよね。

【参考サイト】

Youtubeの埋め込み動画をレスポンシブに対応させる方法
https://design.webclips.jp/youtube-movie-size/

埋め込みYoutubeのサムネイルのカスタマイズ
https://zarigani-design-office.com/technology/customize_youtube_thumbnail/

YouTubeの音を消して(ミュート)埋め込んで自動再生する
https://ziyudom.com/youtube-mute-autoplay/