JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ytvideo1" style="display:none;">
    <iframe id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="http://thefabweb.com/wp-content/uploads/2012/12/6191814472_fa47c79b67_b-900x600.jpg" width="940" height="548" data-vid='DBNYwxDZ_pA'/>

<div style="position: fixed; z-index: 1000; width: 100%; height: 100%">
 <iframe frameborder="0" height="100%" width="100%" 
 src="https://www.youtube.com/embed/DBNYwxDZ_pA?rel=0&amp;autoplay=1">
 </iframe>
 </div>

JavaScript

jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo1').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","http://www.youtube.com/embed/"+$(this).data('vid')+"?autoplay=1");
});