How to Get the Dimensions of the HTML5 Video Element with JavaScript?

To get the dimensions of the HTML5 video element with JavaScript, we have to listen to the loadedmetadata event.

For instance, if we have the following video element:

<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>

Then can get the dimensions of the video element by writing:

const video = document.querySelector("video");  
video.addEventListener("loadedmetadata", (e) => {  
  const {  
    videoHeight,  
    videoWidth  
  } = e.target  
  console.log(videoHeight, videoWidth)  
});

We get the video element with the document.querySelector method.

Then we call addEbentListener with 'loadedmetadata' to listen to the loadedmetadata event.

In the event handler callback, we get the video element with e.target .

And then we get the videoHeight and videoWidth properties to get the height and width of the video respectively in pixels.