JSFiddle - React, Tailwind, and code Playground

by styaue

HTML

<div class="aaa"></div>
<section class="section2">
    <div class="video_block">
        <img id="video_cover" src="https://www.mazda.com.tw/feel-alive/210825/01/images/video_cover.jpg" alt="">
    </div>
    <div class="video-container">
        <iframe id="vd" width="560" height="315" src="https://www.youtube.com/embed/9isniaw-lOE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</section>

SCSS

.section2 {
  position: relative;
  margin: 20px;
  .video_block {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
      height: 100%;
      vertical-align: middle;
    }
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    iframe {
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
  }
}

JavaScript

$(function() {
    var ytUrl;
    $(".video_block").click(function(){
        $(".video_block").css("display", "none");
        ytUrl = $("#vd").attr("src");
        ytUrl = ytUrl = ytUrl + "?autoplay=1";
        $('.aaa').text(ytUrl);
        console.log ("ytUrl:"+ytUrl);
        $("#vd").attr("src", ytUrl);
    });
});