JSFiddle - React, Tailwind, and code Playground

by Knuckles

HTML

<div class="video" data-src="//www.youtube.com/embed/r50JFfofHes?autohide=1&amp;autoplay=1&amp;">
    <img width="640" height="480"  src="http://img.youtube.com/vi/r50JFfofHes/0.jpg"/>
    <div class="play_btn"></div>
</div>

CSS

.video{
    width: 640px; height: 390px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.video>img {
    margin-top: -45px;
}
.video>.play_btn {
    background: url(http://i.imgur.com/1XJi2br.png) no-repeat center transparent;
    width: 77px; height: 77px; 
    position: absolute; top: 50%; left: 50%;
    margin-left: -38px; margin-top: -38px;
    opacity: .5;
}

JavaScript

$('.video').click(function(){ 
	var $i = $(this),
	    src = $i.data('src');
	$i.html('<iframe width="640" height="390" scrolling="no" src="'+src+'"></iframe>');
});