JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<video id="bgvid" autoplay="autoplay" loop>
    <source src="//demosthenes.info/assets/videos/polina.webm" type="video/webm"/>
    <source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/>
</video>

CSS

video {
    position: fixed;
    left: 20%;
    top: 20%;
    width: 250px;
    height: auto;
    z-index: -100;
    transition: 1s opacity;
}

.stopfade {
    opacity: .9;
}

JavaScript

var vid = document.getElementById("bgvid");

function vidFade() {
    vid.classList.add("stopfade");
}

vid.addEventListener('ended', function () {
    vid.pause();
    vidFade();
});

vid.addEventListener("click", function () {
    vid.classList.toggle("stopfade");
    if (vid.paused) {
        vid.play();
        pauseButton.innerHTML = "Pause";
    } else {
        vid.pause();
        pauseButton.innerHTML = "Paused";
    }
})