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(){
$('div#video').attr('embed_code', "<iframe width='854' height='510' src='//www.youtube.com/embed/Q1PY_7GNfIw?autoplay=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
});