JSFiddle - React, Tailwind, and code Playground

by markrummel

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div id="youtube" style="display:none;">
   <iframe width="577" height="325" src="" wmode="transparent" frameborder="0" allowfullscreen></iframe>
 </div>
<div id="video-shell">
    <div id="inner-video-shell">
<i class="fa fa-youtube-play fa-4x"></i>
    </div>
</div>

CSS

#video-shell {width:577px; height:325px; background-image:url('https://secure-b.vimeocdn.com/ts/456/613/456613495_640.jpg'); display:table; position:absolute;}
#inner-video-shell{display:table-cell; vertical-align:middle;}
i.fa {margin:0 auto;}

JavaScript

$(function(){
  $('#video-shell').click(function() {
    $('#youtube').show().find("iframe").attr("src","http://www.youtube.com/embed/UB0m_c1FaJY?rel=0&showinfo=0&autoplay=1");
    $('#imageID').hide();
  });
});