JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">https://www.youtube.com/watch?v=3RtEFgYzMPE</div>
<div class="test">https://www.youtube.com/watch?v=9xEiR2hF-Gk</div>

CSS

.test .wrapper{
    width: 100%;
  background-position: center center;
  background-size: cover;
  background-color: #000;
  position: relative;
}

.test .container {
      position: relative;
  display: block;
  height: 0;
  padding: 0 0 56.25%;
  overflow: hidden;
}

.test .inner {
    position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}

.test button {
      display: inline-block;
  margin-bottom: 20px;
  padding: 6px 12px;
  border: 1px solid #777;
  border-radius: 3px;
  background: #fff;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  line-height: normal;
  cursor: pointer;
}

.test .play-button,
.test .play-button:focus,
.test .play-button:hover {
    background-color: transparent;
   background-image:...

JavaScript

function makeData(url){
    var dats = [],
        pickupID,
        iframeSrc = "http://www.youtube.com/embed/",
        query = "?iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;wmode=transparent&amp;autoplay=1",
        //query = "?autoplay=1",
        convertIframe,
        getThumb;
    
        pickupID = url.split("v=")[1];
    ////www.youtube.com/embed/H-kA3UtBj4M?iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;wmode=transparent&amp;autoplay=1
        convertIframe = "<iframe class='mv_hidden inner' data-src='" + iframeSrc + pickupID + query + "' frameborder='0' allowfullscreen>";
        //mqdefault: 320×180
        //sddefault: 640×480
        //maxresdefault: 1280×720
        getThumb = "//i.ytimg.com/vi/" + pickupID + "/mqdefault.jpg";
    
    dats = [convertIframe, getThumb];
    return dats;
}

(function($){
    $(function(){
        $(".test").each(function(){
            var text = $(this).text();
            $(this).empty();
            var ytAddress = text;
            var data = makeData(ytAddress); //get data
            //console.log(data);
            
            //inset wrapper & background-image
            $(this).append("<div class='wrapper' />");
            var wrapper = $(".wrapper",this);
            wrapper
                .css({
                    "background-image": "url(" + data[1] + ")"
                });
            wrapper
                .append("<div class='container' />");
            
            var container = $(".container", this);
            container
                .append(data[0])
                .append("<button class='button play-button inner' />");         
        });
        
        //each button click to iframe visible
        $(".test .button").each(function(){
            $(this).on("click", function(){
                var sIframe = $(this).parent().children("iframe");
                sIframe.removeClass("mv_hidden");
                sIframe.attr({src: sIframe.attr("data-src")});
              ...