JSFiddle - React, Tailwind, and code Playground

HTML

<article class="parent">
    <div class="overlay">
        <iframe src="https://player.vimeo.com/video/134945180?api=1&player_id=video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>
        <div class="playpause start"></div>
    </div>
</article>

CSS

.parent {
    width:90%;
    margin:50px auto;
    position:relative;
    z-index:10;
}
/* set up the aspect ratio of the video */
 .overlay {
    width:100%;
    height:0;
    padding-bottom:56.25%;
    overflow:hidden;
    position:relative;
    margin:0 auto;
 
}


/* hide the default video controls */
 .overlay iframe {
    width:100%;
    height:180%;
    position:absolute;
    left:0;
    top:-40%;
    z-index:-1;
}
/* Use CSS art to draw the 'Play / Pause' button */
 .playpause {
    width:68px;
    height:40px;
    background: transparent;
   border: solid #fff 2px;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    padding;35px;
    
    margin:auto;
    z-index:100;
    opacity:1;
    cursor:pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.playpause:before {
    display:block;
    content:"";
    width:0;
    height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:20px solid #fff;
    position:absolute;
    left:26px;
    top:10px;
}
.playpause.pause {
    opacity:0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.playpause.pause:before {
    display:block;
    content:"";
    width:6px;
    height:20px;
    border-left:6px solid #fff;
    border-right:6px solid #fff;
    border-width:0 6px;
}
.playpause:hover {
    border: solid transparent 2px;
}
.overlay:hover .playpause {
    opacity:1;
}
@media only screen and (max-width:768px) {
    .parent {
        width:90%;
        margin:50px auto;
    }
}
/* fixes for the iPhone and iPad to show default controls */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .overlay iframe {
        height:100%;
        top:0;
        z-index:200;
    }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .overlay iframe {
        height:100%;
        top:0;
        z-index:200;
    }
}
@media only screen and...

JavaScript

var Froogaloop=function(){function e(a){return new e.fn.init(a)}function g(a,c,b){if(!b.contentWindow.postMessage)return!1;a=JSON.stringify({method:a,value:c});b.contentWindow.postMessage(a,h)}function l(a){var c,b;try{c=JSON.parse(a.data),b=c.event||c.method}catch(e){}"ready"!=b||k||(k=!0);if(!/^https?:\/\/player.vimeo.com/.test(a.origin))return!1;"*"===h&&(h=a.origin);a=c.value;var m=c.data,f=""===f?null:c.player_id;c=f?d[f][b]:d[b];b=[];if(!c)return!1;void 0!==a&&b.push(a);m&&b.push(m);f&&b.push(f);
return 0<b.length?c.apply(null,b):c.call()}function n(a,c,b){b?(d[b]||(d[b]={}),d[b][a]=c):d[a]=c}var d={},k=!1,h="*";e.fn=e.prototype={element:null,init:function(a){"string"===typeof a&&(a=document.getElementById(a));this.element=a;return this},api:function(a,c){if(!this.element||!a)return!1;var b=this.element,d=""!==b.id?b.id:null,e=c&&c.constructor&&c.call&&c.apply?null:c,f=c&&c.constructor&&c.call&&c.apply?c:null;f&&n(a,f,d);g(a,e,b);return this},addEvent:function(a,c){if(!this.element)return!1;
var b=this.element,d=""!==b.id?b.id:null;n(a,c,d);"ready"!=a?g("addEventListener",a,b):"ready"==a&&k&&c.call(null,d);return this},removeEvent:function(a){if(!this.element)return!1;var c=this.element,b=""!==c.id?c.id:null;a:{if(b&&d[b]){if(!d[b][a]){b=!1;break a}d[b][a]=null}else{if(!d[a]){b=!1;break a}d[a]=null}b=!0}"ready"!=a&&b&&g("removeEventListener",a,c)}};e.fn.init.prototype=e.fn;window.addEventListener?window.addEventListener("message",l,!1):window.attachEvent("onmessage",l);return window.Froogaloop=
window.$f=e}();

$(function () {
    var iframe = document.getElementById('video');
    var player = $f(iframe);
    
    player.addEvent('ready', function () {
        player.addEvent('finish', onFinish);
    });
    
    $('.playpause').click(function () {
        player.api('paused', function (paused) {
            if (!paused) {
                player.api('pause');
                $(".playpause").removeClass('pause');
            } else {
               ...