JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class='text'>Text .. text .. text</br>second line ...</br>third line ...</h2>
<video id="video" controls preload="auto" width='640' height='360'>
    <source src="http://mintnet.net/basic-html/videos/mov_bbb.mp4" type='video/mp4'/>
    <p>Video Playback Not Supported</p>
</video>

<video id="video1" controls preload="auto" width='640' height='360'>
    <source src="http://mintnet.net/basic-html/videos/mov_bbb.mp4" type='video/mp4'/>
    <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;
}

JavaScript

$(function(){
     
     var videoid = "";
  
    $('video').bind('play', function (e) {
        videoid = $(this).attr('id');
    });
   
   $('video').on("click", function() {
   // test if global variable work
   			console.log(videoid);
   });
   
   var abc = 'video1';
   
   
  document.getElementById(videoid).addEventListener('playing', function(){
    console.log('play' + videoid);
  })
  document.getElementById(videoid).addEventListener('pause', function(){
    console.log('3443');
  })

  document.getElementById(videoid).addEventListener('ended', function(){
    console.log('242434');
  })
    
})