JavaScript How to addeventlistener for a variable referencing a static element without an ID attribute for video tag?

[carmichael yames]

the event doesn't fire for resizing the video tag, i reference the video tag with the variable A which I call dynamically in playvid() function. I have named an id in the video tag and then called videotagId.addeventlistener, but I wanted to try to reference this video tag without specifically callings its ID. I was trying to beautify maximizing screen space for mobile devices on a video editing app but I realize that I have to wait until after I setAttribute(height or width) on the video tag for the resizing event (its not asap), once this fires I can successfully query video.videoWidth or video.offsetWidth and do new math on centering the video tag. if I do video.setAttr('width',number); and then video.videoWidth it will not be reflected new change until the resize event fires

I've checked google and all I can find is people attaching CLICK events to the body element and then parsing through every single click event until you find the one you're looking for, which isn't exactly what I"m doing.

    <style>
 
      body {
          color:white;
          background:black;
      }
  </style>
 
  <script>



function playvid(e) {
 
     var a = e.previousElementSibling;
    console.log(a.src);
 


         a.addEventListener('resize', (e) => {
   alert('this does not fire?');
             //in another instance it complains a is  undefined

   });
 
 
 
    setTimeout( function () {
        a.setAttribute('height', window.innerHeight- e.offsetHeight -4);
        a.play();
    }, 500);

}
 
 
 

 
 
  </script>



 
 
  <video style="border: 3px solid red;" src="https://file-examples.com/storage/fe59cbbb63645c19f9c3014/2017/04/file_example_MP4_480_1_5MG.mp4"></video>



 
    <div onclick="playvid(this)" style="cursor:pointer; font-size:40px; border:1px solid green;" >
      click here</div>

 

[carmichael yames]

This does NOT fire the event:

  <video id="bob" style="border: 3px solid red;" src="https://file-examples.com/storage/fe59cbbb63645c19f9c3014/2017/04/file_example_MP4_480_1_5MG.mp4"></video>
 
    <div onclick="playvid(this)" style="cursor:pointer; font-size:40px; border:1px solid green;" >
      click here</div>
 
 
 
  <script>
      function playvid(e) {
 
     var a = e.previousElementSibling;
    console.log(a.src);
    

      
               bob.addEventListener('resize', (e) => {     
   alert('this does not fire?');
             //in another instance it complains a is  undefined

   });


        a.setAttribute('height', window.innerHeight- e.offsetHeight -4);
        a.play();


}
      

      
      
</script>

however if i Put:

            bob.addEventListener('resize', (e) => {     

   alert('this does not fire?');

             //in another instance it complains a is  undefined



   });

outside the function, it will fire

 

[OldMan]

You're trying to fire the listener when you click the inside the video tag so this will do that
bob.addEventListener('click', function () {....});
fill in the dots.