JSFiddle - React, Tailwind, and code Playground

by MAeSI

HTML

<video id='box' width='25%'>
    <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
    </video>
<video controls id='boxi' width='85%'>
    <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
    </video>

CSS

#boxi{position:absolute; top:20px;}
#box{position:absolute; z-index:1; top:20px;}

JavaScript

document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('box').addEventListener('click',function(){
        var w=this.style.width=='80%'?'25%':'80%';
        this.style.width=w;
        if(this.style.width=='80%'){
            document.getElementById('boxi').pause();
            this.play();
        }
        else
            this.pause();
    })
});