JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<div id='video'></div>
<span id='create'>create video</span>

CSS

#video {
    display: none;    
}

JavaScript

document.getElementById('create').addEventListener('click', function () {
    var element = document.createElement('video');
    
    element.autobuffer = true;
    element.preload = 'auto';
    element.src = 'http://www.mediaartslab.com/itunes360/harrypotter/video/videos/300x250_15s.mp4';
    
    element.addEventListener('canplaythrough', function () {
        document.getElementById('video').style.display = 'block'; 
        this.volume = 0;
        this.muted = true;
        this.play();
            
    }, false);
    
    document.getElementById('video').appendChild(element);
}, false);