JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>

    <video poster="http://snapshot.opera.com/resources/BigBuckBunny.png" width="640" height="360" preload="auto" controls>
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
    </video>

    <video poster="http://snapshot.opera.com/resources/BigBuckBunny.png" width="640" height="360" preload="auto" id="bunny">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
    </video>
    
<script>
    var el = document.getElementsByTagName("video");
    for (var i = 0; i < el.length; i++) {
        el[i].addEventListener('click', function(e) {
            playVideo(this);
            return false;                
        }, false);
    }
</script>
    
</body>

CSS

video {
    display: block;
    border: 1px solid #f00;
    margin: 50px;   
}

JavaScript

playVideo = function(el) {
    if (!el) { return; }
    if (el.getAttribute('controls') !== 'true') {
        el.setAttribute('controls', 'true');                    
    }
    el.paused ? el.play() : el.pause();
    el.removeAttribute('controls');
}
 
/* Not just on click either, uncomment this to see it triggered automatically */    
//setTimeout(function() { playVideo(document.getElementById('bunny')); }, 2000)