JSFiddle - React, Tailwind, and code Playground

by akmozo

HTML

<h2 class='text'>Text .. text .. text</br>second line ...</br>third line ...</h2>
<video id="video" controls preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png"
width='640' height='360'>
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'/>
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'/>
    <p>Video Playback Not Supported</p>
</video>

CSS

.text {
    display: block;
    z-index: 10;
    position: absolute;
    text-align: center;
    font-size: 28px;
    top: 100px;
    background-color: white;
    width: 640px;
}
#video {
    z-index: 9;
    position: absolute;
}

JavaScript

$(function(){
    
    var video = $('#video')[0];
    
    video.addEventListener('playing', function(){
           $('.text').fadeOut();
    })
     video.addEventListener('pause', function(){
           $('.text').fadeIn();
    })
    
})