HTML5 Video Dimensions HTML5 Video Dimensions javascript javascript

HTML5 Video Dimensions


It should be noted that the currently accepted solution above by Sime Vidas doesn't actually work in modern browsers since the videoWidth and videoHeight properties aren't set until after the "loadedmetadata" event has fired.

If you happen to query for those properties far enough after the VIDEO element is rendered it may sometimes work, but in most cases this will return values of 0 for both properties.

To guarantee that you're getting the correct property values you need to do something along the lines of:

var v = document.getElementById("myVideo");v.addEventListener( "loadedmetadata", function (e) {    var width = this.videoWidth,        height = this.videoHeight;}, false );

NOTE: I didn't bother accounting for pre-9 versions of Internet Explorer which use attachEvent instead of addEventListener since pre-9 versions of that browser don't support HTML5 video, anyway.


<video id="foo" src="foo.mp4"></video>var vid = document.getElementById("foo");vid.videoHeight; // returns the intrinsic height of the videovid.videoWidth; // returns the intrinsic width of the video

Spec: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element


Ready-to-use function

Here's a ready to use function which returns the dimensions of a video asynchrously, without changing anything in the document.

// ---- Definitions ----- ///** Returns the dimensions of a video asynchrounsly. @param {String} url Url of the video to get dimensions from. @return {Promise} Promise which returns the dimensions of the video in 'width' and 'height' properties. */function getVideoDimensionsOf(url){    return new Promise(resolve => {        // create the video element        const video = document.createElement('video');        // place a listener on it        video.addEventListener( "loadedmetadata", function () {            // retrieve dimensions            const height = this.videoHeight;            const width = this.videoWidth;            // send back result            resolve({height, width});        }, false );        // start download meta-datas        video.src = url;    });}// ---- Use ---- //getVideoDimensionsOf("https://www.w3schools.com/html/mov_bbb.mp4")   .then(console.log);