DESIGN STUDY SYSTEM WEBSITE Edit : 2018.09.05 Update : 2023.03.27

YouTubeの再生ボタンをデザインに合わせて変える方法

きのう台風すごかったですね!
小学生の頃に自然の力が強い事はポケモンで学んだのですが(?)、風は正直ナメていたのでまた自然の力を痛感しました。。。

今日は某食品メーカーさんのサイトで実装した、Youtubeの再生ボタンをデザインに合わせて変更する方法を紹介したいと思います。
構造は単純で、iframeの上にキャプチャと再生ボタンをかぶせるという構造です!

iframe 組み込みの YouTube Player API を使用し、再生ボタンが押されたらJsでyoutubeを自動再生できるようにします。
*検証環境ではSP・PCともに同様の動きが確認できました。

Contents

HTML
CSS
Js

HTML

<div class="youtube_area">
  <iframe id="ytPlayer" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" src="[掲載したいYoutubeのURLによって変更]" width="640" height="390" frameborder="0"></iframe>
  <ul class="poster_list">
    <li class="current">
     <img src="[キャプチャ]" class="transition_scale" oncontextmenu="return false">
     <div class="playicon"></div>
    </li>
  </ul>
</div>

</li>

</ul>

</div>

CSS

youtubeの黒い背景が枠として、表示されてしまうのを防ぐためwidthを100.5%に指定しています。

.youtube_area {
  position: relative;
  width: 100%;
  padding: 56.3% 0 0;
  overflow: hidden;
}
.youtube_area #ytPlayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100.5%;
  height: 100.5%;
}
.youtube_area .poster_list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 100;
}
.youtube_area .poster_list li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow: hidden;
}
.youtube_area .poster_list li.current {
  display: block;
}
.youtube_area .poster_list li img {
  width: 100.5%;
}
.youtube_area .poster_list li .playicon {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 再生ボタンの幅;
  height: 再生ボタンの高さ;
}
.youtube_area .poster_list li .playicon::before  {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  content: '';
  background: url("[再生ボタン]") no-repeat;
  display: inline-block;
  width: 再生ボタンの幅;
  height: 再生ボタンの高さ;
}

.youtube_area {

position: relative;

width: 100%;

padding: 56.3% 0 0;

overflow: hidden;

}

.youtube_area #ytPlayer {

position: absolute;

top: 0;

left: 0;

width: 100.5%;

height: 100.5%;

}

.youtube_area .poster_list {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

cursor: pointer;

z-index: 100;

}

.youtube_area .poster_list li {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

display: none;

overflow: hidden;

}

.youtube_area .poster_list li.current {

display: block;

}

.youtube_area .poster_list li img {

width: 100.5%;

}

.youtube_area .poster_list li .playicon {

position: absolute;

top: 0;

left: 0;

margin: auto;

width: 再生ボタンの幅;

height: 再生ボタンの高さ;

}

.youtube_area .poster_list li .playicon::before {

position: absolute;

top: 0;

left: 0;

margin: auto;

content: '';

background: url("[再生ボタン]") no-repeat;

display: inline-block;

width: 再生ボタンの幅;

height: 再生ボタンの高さ;

}

Js

<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var ytArea = 'ytPlayer';
var ytID = '[任意のID]';
var ytWidth = 640;
var ytHeight = 390;
function onYouTubeIframeAPIReady() {
    ytPlayer = new YT.Player(ytArea, {
        height: ytHeight,
        width: ytWidth,
        videoId: ytID,
        playerVars: {
               rel      : 0, // 関連動画非表示
               showinfo : 0, // 動画情報非表示
               controls : 1,
               fs: 0,
               modestbranding: 0,
               enablejsapi: 1
           }
    });
}
</script>