Detect aspect ratio - HTML5 video

html video html5-video aspect-ratio
Jon Raasch picture Jon Raasch · Feb 15, 2013 · Viewed 10.6k times · Source

Is it possible to detect the aspect ratio of an HTML5 video element?

I know the video will just shrink to fit in the <video> element's dimensions, but I want to detect the aspect ratio of the source video.

That way you could remove any black bars.

Sorry I don't see this answered anywhere else.

Answer

Sebastian Job Bj&#248;rnager Jensen picture Sebastian Job Bjørnager Jensen · Feb 15, 2013

Pasting from another StackOverflow answer: https://stackoverflow.com/a/4129189/1353189

<video id="foo" src="foo.mp4"></video>

var vid = document.getElementById("foo");
vid.videoHeight; // returns the intrinsic height of the video
vid.videoWidth; // returns the intrinsic width of the video

Source (HTML5 spec): http://www.w3.org/TR/html5/video.html#video

You can then calculate the aspect ratio by dividing the width by the height.

Related questions

Is there a way to make HTML5 video fullscreen?

Is there a way to play a video fullscreen using the HTML5 <video> tag? And if this is not possible, does anybody know if there is a reason for this decision?

Read More
Play infinitely looping video on-load in HTML5

I'm looking to place a video in an HTML5 page that will begin playing on page-load, and once completed, loop back to the beginning without a break. The video should also NOT have any controls associated with it, and either …

Read More
Detect if HTML5 Video element is playing

I've looked through a couple of questions to find out if an HTML5 element is playing, but can't find the answer. I've looked at the W3 documentation and it has an event named "playing" but I can't seem to get …

Read More