JSFiddle - React, Tailwind, and code Playground

HTML

<a class="project-link" href="#modal5" id="one" style="margin-right:25px;">Modurra Shelving </a>

<div class="remodal" data-remodal-id="modal5">
    <div class="dar">Darrien Tu.</div>
    <button class="remodal-close" data-remodal-action="close"></button>
    <div class="anchor-point"></div>
    <div class="title">
        <p class="projectTitle"></p>
    </div>
    <div class="imgWrap">
        <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>
    </div>
</div>

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;
    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 (min-device-width : 375px) 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) {
          ...