youtube_render

last update: 2020/12/19
<!doctype html>
<html class="pc">
<head>
<meta name="viewport" content="width=device-width">
<title>title</title>

<style>
html, body {
margin: 0;
padding: 0;
text-align: center;
}
body {
padding-top: 10px;
}
iframe {
vertical-align: bottom;
}
.movie {
display: block;
margin: 0 auto 10px;
position: relative;
background: #000;
}
.movie::before {
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background: #000;
opacity: .3;
z-index: 2;
}
.movie::after {
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
content: "";
display: block;
width: 40px;
height: 40px;
background: url(play.png) 0 0 no-repeat;
background-size: 40px 40px;
z-index: 3;
}
.pc .movie {
width: 800px;
cursor: pointer;
}
.sp .movie {
width: calc(100% - 20px);
}
img {
width: 100%;
vertical-align: bottom;
z-index: 1;
}
</style>

</head>
<body>


<div class="movie" data-videoid="uQ2j201BWIg">
<img src="thumb01.png" alt="">
</div>

<div class="movie" data-videoid="dkhHfvVLVa4">
<img src="thumb02.png" alt="">
</div>



<script>
(function(w, doc){
  var html = doc.querySelector('html');
  var raw = window.navigator.userAgent;
  var ua = {};
  var deviceType;
  // sp
  if (/iPhone/.test(raw) || /iPod/.test(raw)) {
    deviceType = 'sp';
  } else if (/Android/.test(raw) && /Mobile/.test(raw)) {
    deviceType = 'sp';
  } else if (/Windows/.test(raw) && /Phone/.test(raw)) {
    deviceType = 'sp';
  } else if (/Firefox/.test(raw) && /Mobile/.test(raw)) {
    deviceType = 'sp';
  } else if (/BlackBerry/.test(raw) || /BB10/.test(raw)) {
    deviceType = 'sp';
  } else if (/Nokia/.test(raw)) {
    deviceType = 'sp';
  // tablet
  } else if (/iPad/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Android/.test(raw) && !/Mobile/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Windows/.test(raw) && /Touch/.test(raw) && !/Tablet PC/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Firefox/.test(raw) && /Tablet/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Playbook/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Kindle/.test(raw) || /Silk/.test(raw)) {
    deviceType = 'tablet';
  // pc
  } else {
    deviceType = 'pc';
  }
  ua.raw = raw;
  ua.deviceType = deviceType;
  ua.isMS = deviceType === 'pc' && /Windows NT/.test(raw) && (!/Chrome/.test(raw) || /Firefox/.test(raw)); // ie or edge
  ua.isPC = deviceType === 'pc';
  ua.isSP = deviceType === 'sp';
  ua.isTABLET = deviceType === 'tablet';
  if (ua.isPC) {
    html.setAttribute('class', 'pc');
  } else {
    html.setAttribute('class', 'sp');
  }
  w.ua = ua;
})(window, document);
</script>

<script>
(function(doc) {
  var movies = doc.getElementsByClassName('movie');

  [].forEach.call(movies, function(el) {
    el.addEventListener('click', function() {
      var data = {
        el,
        height: el.offsetHeight,
        width: el.offsetWidth,
        videoid: el.dataset.videoid,
      };
      onYouTubeIframeAPIReady(data);
    }, false);
  });

  // youtube API
  var tag = doc.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = doc.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  var onYouTubeIframeAPIReady = function(data) {
    player = new YT.Player(data.el, {
      height: data.height,
      width: data.width,
      videoId: data.videoid,
      playerVars: {
        rel: 0,
        showinfo: 0,
        controls: 1,
        autohide: 1,
      },
      events: {
        'onReady': onPlayerReady,
      },
    });
  };
  var onPlayerReady = function(event) {
    event.target.playVideo();
  };
})(document);
</script>

</body>
</html>

code_popup
sample