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>
<div id="ghost"></div>

CSS

#boxi{position:absolute; top:20px;}
#box{position:absolute; z-index:1; top:20px;}
#ghost{
    display:none;
    position:absolute; 
    z-index:2;
    bottom:150px; 
    right:100px;
    width:50px; 
    height:50px; 
    background-color:green;
    border-radius:25px;
}

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();
    })
    document.getElementById('boxi').addEventListener("timeupdate", function () {
  var videoTime = this.currentTime;
        var divGhost = document.getElementById('ghost');
        if(videoTime >= 2 && videoTime <= 6)
            divGhost.style.display='block';
        else 
            divGhost.style.display='none';
}, false);
});