JSFiddle - React, Tailwind, and code Playground

HTML

<div class="jacketc ">


  <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg>

  <div class="lines"></div>
</div>

<div class="wrapg hide">

  <div class="video " data-id="M7lc1UVf-VE"></div>

  <div class="lines"></div>
</div>

CSS

.jacketc {
  position: relative;
  width: 606px;
  height: 344px;
  cursor: pointer;
  margin-top: 45px;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

.jacketc .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  fill: #fa33fc;
}

.jacketc .lines::before,
.jacketc .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.jacketc .lines::after {
  left: 399px;
}

.wrapg {
  position: relative;
  width: 606px;
  height: 344px;
  margin-top: 45px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid green;
  box-sizing: border-box;
  background: #000000;
}

.wrapg iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 338px;
}

.wrapg .lines::before,
.wrapg .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: green;
}

.wrapg .lines::after {
  left: 399px;
}

.hide {
  display: none;
}

JavaScript

(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");
  const hide = (el) => el.classList.add("hide");
  const enableAutoplay = (el) => el.src.replace("autoplay=0", "autoplay=1");
  const autoplay = (el) => el.setAttribute("src", enableAutoplay(el));

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const wrapper = cover.parentNode.querySelector(".wrapg");
    hide(cover);
    show(wrapper);
    autoplay(wrapper);
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());
(function videoPlayer() {
  "use strict";


  function onPlayerReady(evt) {
    const player = evt.target;
    player.setVolume(50); // percent
  }

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/player_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  };
}());