JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<div id="video" class="click">
    <iframe src="https://player.vimeo.com/video/126726032?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=0&api=1" class="click" width="550" height="364" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
    <img src="http://media-cdn.tripadvisor.com/media/photo-s/01/e4/f8/e6/another-view-of-landscape.jpg" class="image click showvideo">

CSS

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

JavaScript

var iframe = $('#video iframe')[0];
    var player = $f(iframe);

    $('.showvideo').on('click', function(){
        $('#video').show();
        $('.image').hide();
        player.api('play');
    });

    $(document).click(function (event) {
              if (!$(event.target).hasClass('click')) {
        $('#video').hide();
        $('.image').show();
        player.api('pause');
              }
    });