Paul Schneider Paul Schneider - 5 months ago 7x
jQuery Question

Get the original dimensions of a <video>

I'm trying to have a list of videos and pictures, each resized to the same size for easier view.

when the user clicks on one of them, they should be resized to their original size (or that of the bounding box at max)

My problem is: how do i get the ORIGINAL dimensions of a video?

for images,

var img = new Image();
img.src= $("src");
img.width //this is the width
img.height //this is the height

works like a charm.

But i can't find a way to do the same for a
. is there any at all?

I understand there's something about loading metadata, but the video IS already loaded, i just want to resize it to its original size (well i wouldn't have a problem with them being lazyloaded on resize, but i guess that's more of an effort)

Is it possible to do this? if so, how?
jQuery preferred.


var video = $(;
var width = video[0].videoWidth;

Amr Amr

You can do that with native Javascript :

var video = $("#myvideo" ); //JQuery selector 
video[0].videoWidth; //get the original width
video[0].videoHeight; //get the original height

To get know too :

video[0].width; //get or set width for the element in DOM
video[0].height; //get or set height for the element in DOM

For more information you can check those links from W3 : videoWidth , videoHeight