JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>

<div class="image click">
     <div id="video" class="hide-video"><iframe src="https://player.vimeo.com/video/126726032?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=0&api=1&player_id=vimeo1" width="550" height="364" frameborder="0" id="vimeo1" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<a href="javascript:void(0);" id="showVideo" class="show-video">
     <img src="http://media-cdn.tripadvisor.com/media/photo-s/01/e4/f8/e6/another-view-of-landscape.jpg" class="click">
</a>
</div>
    
    <button class="show-video">play</button>
        <button class="video-pause hide-video">pause</button>

CSS

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

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

JavaScript

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

    // When the player is ready, add listeners for pause, finish, and playProgress
 

    // Call the API when a button is pressed
    $('button').bind('click', function() {
        player.api($(this).text().toLowerCase());
    });

$('.show-video').on('click', function(){
    $('#video').fadeIn();
    $('img').fadeOut();
    player.api('play');
});

$('.hide-video').on('click', function(){
    $('#video').fadeOut();
    $('img').fadeIn();
    player.api('pause');
});