JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<style>
#bgvidcont {
  position:relative;
}

#playvideo {
cursor:pointer;
  position:absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
z-index:2;
}
</style>



<div onclick='document.getElementById("playvideo").style="display:none"' id="bgvidcont" style="position: relative;z-index: 1;top: -8vw; margin-left:auto; margin-right:auto; text-align: center; margin-top:-37px; margin-bottom:-9vh">
<video onclick='document.getElementById("playvideo").style="display:none;"' playsinline controls  id="bgvid2" poster="https://cdn.shopify.com/s/files/1/0647/4927/3302/files/postera.png?v=1658902273">
<source src="https://cdn.shopify.com/videos/c/o/v/45387cb90f1b45c397304cd07092b61a.mp4" type="video/mp4">
        </video>

<img onclick="playVid()" id="playvideo"   src="https://cdn.shopify.com/s/files/1/0647/4927/3302/files/playbtn.png?v=1658277969" width=80px />
</div>

<script>
const vbtn = document.getElementById("playvideo");
const vid = document.getElementById("bgvid2");

function pauseVid() {
vid.pause();
}
function playVid() {
document.getElementById("playvideo").style="display:none";
vid.play();
}
</script>