JSFiddle - React, Tailwind, and code Playground

HTML

<div onclick="this.nextSibling.style.display='block'; this.style.display='none'"><img src="https://i.imgur.com/QvWeAsD.jpg" style="position:relative;top:0;left:0;" />
<div style="position: absolute; top: 50%; left: 50%; margin-top: -64px; margin-left: -64px;">
<img src="https://www.shareicon.net/data/128x128/2015/08/29/92756_play_607x607.png" class="play" style="cursor:pointer;" />
</div>
</div><div style="display:none">
<!-- Embed code here -->
 
<iframe width="1000" height="512" src="https://www.youtube.com/embed/1R3Sc2kEaNM" frameborder="0" allowfullscreen></iframe>
 
<!-- End Embed code -->
 
</div>

CSS

img.play {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

img.play:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}