Get width and height of HTML5 video using embedded JavaScript

Question

I am trying to get the width and height of a tag, I use the following markup:

<div class="masked" id="video_container"> <video id="video" loop="loop" muted="muted" tabindex="0" style="width: 100%; height: 100%;"> <source src="..." type="..."</source> <source src="..." type="..."</source> </video> </div> 

The key part is that the width and height attributes are set to 100%, and when you change the window, the proportions of the video are saved, but I can not get the actual width and height.

I tried to get the value using the offsetWidth and offsetHeight properties, but they return the actual video size.

Edit:

This is part of the code that works for me:

 var videoActualWidth = video.getBoundingClientRect().width; var videoActualHeight = video.getBoundingClientRect().height; var aspect = videoActualWidth / videoActualHeight; if (w / h > aspect) { video.setAttribute("style", "height: 100%"); } else { video.setAttribute("style", "width: 100%"); } 

Thanks!

Answer 1

This code will give you the dimensions of the video tag (not the dimensions of the video itself)

 var video = document.getElementById("video"); var videotag_width = video.offsetWidth; var videotag_height = video.offsetHeight; 

This code will give you the dimensions of the currently playing video.

 var video = document.getElementById("video"); var video_height = video.videoHeight; var video_width = video.videoWidth;