JSFiddle - React, Tailwind, and code Playground

HTML

<h3>click on picture</h3>
<div class="me">
<p>Hello</p>
<img src="" alt="">
<video poster="http://i.imgur.com/NDOYT4L.jpg">
  <iframe max-width="560" height="auto" src="https://www.youtube.com/embed/E1DmGfXO2Tk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</video>
</div>

CSS

video{
  display:block;
  width:300px;
  height:200px;
  position: relative;
}

video poster  {
width: 100%;
}

p {
  position: absolute;
  color: #ffffff;
  z-index: 5;
  left: 10%;
  top: 80%;
}

.me {
  position: relative;
  max-width: 256px;
}

JavaScript

document.querySelector("video").onclick = function(){
	if(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2){
  	this.pause();
    this.controls = false;
  }
  else if(this.paused){
  	this.play();
    this.controls = true;
  }
}