JSFiddle - React, Tailwind, and code Playground

HTML

<div id="video">
    <img class="poster" src="http://s20.postimg.org/ddh45wqnd/t_cateye.jpg">
</div>

CSS

div#video {
    width:100px;
    height:75px;
    border:1px solid black;
    background-colkor:beige;
    cursor:pointer;
}

JavaScript

$(function(){	  // Ready
      $('div#video').attr('embed_code', "<iframe width='854' height='510' src='//www.youtube.com/embed/Q1PY_7GNfIw' frameborder='0' allowfullscreen></iframe>");
//    $('div#video').attr('embed_code', "<iframe width='854' height='510' src='//www.youtube.com/embed/Q1PY_7GNfIw?autostart=1' frameborder='0' allowfullscreen></iframe>");

})

    $('#video').click(function () {
    var this$ = $(this); 
    var embedCode = this$.attr('embed_code'); 
       this$.find('.poster').remove(); 		// remove poster image
       this$.prepend(embedCode); 			// put in the YouTube video
    });