JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//www.youtube.com/player_api"></script>

<div class="wrap">
<img id="play" src="http://placehold.it/560x315">
    
<iframe width="560" height="315" src="//www.youtube.com/embed/cfOa1a8hYP8?enablejsapi=1" frameborder="0" allowfullscreen id="Youtube"></iframe>

</div>

CSS

.wrap {
    position: relative;
}
img, iframe {
    position: absolute;
    top: 0;
}
img {
    z-index: 10;
    opacity: .7;
}

JavaScript

$(document).ready(function() {
  $('#play').on('click', function(ev) {
     var player = $("#Youtube")[0];
     player.src += "&autoplay=1";
     
    ev.preventDefault();
   });
});