Full width HTML5 video without preserving the aspect ratio

John Avis by | August 10, 2016 | HTML/CSS

I recently needed to show a video on a web page that needed to take the full width of the container (in this case, the full screen width) but keep a consistent height.
I recently needed to show a video on a web page that needed to take the full width of the container (in this case, the full screen width) but keep a consistent height.

After some research I found a Stack Overflow post that lead me to a blog post, and a comment was left with what seems to be a good solution. This blog post has since been removed so I can't reference it or credit the author.

This works by changing a CSS transform property value when the video is loaded or the browser window resized.

Here's the JavaScript function (jQuery required), but see the source of the working example below for how to use.

function sizeVideo(video) {
var rawWidth = $(video).prop("videoWidth");
var rawHeight = $(video).prop("videoHeight");
var origAspect = rawWidth / rawHeight;
var containerWidth = $(video).width();
var containerHeight = $(video).height();
var targetAspect = containerWidth / containerHeight;
var multi = (targetAspect / origAspect);
$(video).css({
"transform": "scaleX(" + multi + ")",
"-ms-transform": "scaleX(" + multi + ")",
"-moz-transform": "scaleX(" + multi + ")",
"-webkit-transform": "scaleX(" + multi + ")",
"-o-transform": "scaleX(" + multi + ")"
});
}


The following working example uses the basic Bootstrap 3.x template and includes necessary CSS and an example of what events to call this function in.

Working example

Related Posts

HTML/CSS

Excellent tutorial to make DHTML windows

by John Avis | March 6, 2011


HTML/CSS

100% CSS Layout

by John Avis | May 28, 2008


HTML/CSS

Setting a Maximum Page Width Using CSS

by John Avis | February 16, 2008

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment
Tags
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP

About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

Subscribe

Get the latest posts delivered to your inbox.