JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <iframe id="player" type="text/html" width="640" height="390"
      src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"
      frameborder="0">
    </iframe>
    <div class="title">
      Hide this div when video starts playing and show it when video is paused
    </div>
 </div>

CSS

.wrap{
  position: relative
}
.title{
  background:rgba(255,0,0,0.7) ;
  padding: 20px;
  position: absolute;
  bottom:0; left:0; right:0;
  color: white; font-size: 20px
  }

JavaScript

var player;
    function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
        events: {
          'onReady': onPlayerReady
        }
      });
    }
  function onPlayerReady(event) {
    var embedCode = event.target.getVideoEmbedCode();
    event.target.playVideo();
    if (document.getElementById('embed-code')) {
      document.getElementById('embed-code').textContent = embedCode;
    }
  }