JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<div class="image click">
     <div id="video" class="click"></div>
           <a href="javascript:void(0);" id="showVideo" class="click">
                  <img src="http://media-cdn.tripadvisor.com/media/photo-s/01/e4/f8/e6/another-view-of-landscape.jpg" class="click">
           </a>
</div>

CSS

.image {
    width:550px;
    height: 364px;
    position: relative;
}

#video {
    display:none;
    position:absolute;
    z-index:1;
}

JavaScript

$('#showVideo').click(function() 
        {
            $('#video').show().html('<iframe src="http://player.vimeo.com/video/126726032?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1&api=1&player_id=vimeo1" width="550" height="364" frameborder="0" id="vimeo1" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
        });

$(document).click(function (event) {
    if (!$(event.target).hasClass('click')) {
        $('#video').hide();
    }      
});