JSFiddle - React, Tailwind, and code Playground

by Yehia Awad

HTML

<script src="https://a.vimeocdn.com/js/froogaloop2.min.js"></script>
 <div id="vidFrame" class="play">
<iframe id="vimeo-video" src="http://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
 </iframe>
  <img id="vimeo-id" width="300" height="169" src="" />
  </div>

CSS

#vimeo-id,iframe{
  position:absolute;
}
#vimeo-id{
 cursor:pointer; 
}

JavaScript

$.getJSON('https://www.vimeo.com/api/v2/video/152985022.json?callback=?', {format: "json"}, function(data) {
        $("#vimeo-id").attr("src",data[0].thumbnail_large);
});

$("#vimeo-id").on("click",function(){
$(this).fadeOut();
var player=$f($("#vimeo-video")[0]);
 player.api("play");
})