JSFiddle - React, Tailwind, and code Playground

by Harm Zeinstra

HTML

<iframe width="420" height="315" src="https://youtube.com/embed/tsU1nnVq7NI" frameborder="0" allowfullscreen id="mp-video"></iframe>

<div class="slick-slider">

  <img class="mp-icon" src="https://www.mentorup.org/assets/video-play-button-png-64026affdd30f33e1cc2ad7a255d9f1a.png"> 
</div>

CSS

div {
  float: left;
  margin: 20px;
}

iframe {
  display: none;
}

.slick-slider {
  float: left;
  width: 120px;
  height: 90px;
  cursor: pointer;
  position:relative;
}
.slick-slider > img{
  width: 120px;
  position:absolute;
  float:left;
}

JavaScript

var iframe = $("#mp-video");
    var iframe_src = iframe.attr("src");
    var youtube_video_id = iframe_src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

    if (youtube_video_id.length == 11) {
      var video_thumbnail = $("<img class=\"slick-slider\" src=\"//img.youtube.com/vi/" + youtube_video_id + "/0.jpg\">");
      $(".slick-slider").prepend(video_thumbnail);

      $(".slick-slider").click(function() {
        iframe.fadeToggle('400');
      });
    }