JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
   <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
<div class="container">
<img class="container" src="https://www.easycash4ads.com/images/vbg.png"/>
<div class="myvid">
<div style="margin-top: 3%; width: 100%" class="plyr__video-embed " id="player">
  <iframe class="myvid"
    src="https://www.youtube.com/embed/Zvs91PjBQhA?si=DvsHh1Y6_3egWW0J?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=0&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>
</div>
</div>

CSS

.myvid {
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  width: 100%;
  background: #333;
  margin: auto;
  top: 0
}

.container {
  Max-width: 1000px;
  width: 100%;
  margin: auto;
  background: silver;
  
  z-index: 1000000
}

JavaScript

const player = new Plyr('#player');