Full width HTML5 video without preserving the aspect ratio

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

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

Computers & Internet Web Development Website Hosting

500 Internal Server Error after migrating from IIS 7.5 to IIS 10

by John Avis | November 4, 2019

As support ends for Microsoft Windows Server 2008 I have recently gone through migrating some websites to a new server running Windows Server 2016 and IIS 10 but some of the websites did not work.


Jquery/Javascript Web Development

tagInput: A simple jQuery plugin for tag entry using Bootstrap 4

by John Avis | October 15, 2019

For a website project I needed a way to enter multiple tags. I just wanted something simple that I could easily modify to suit my own needs, so I wrote my own.


ASP.NET Web Forms Web Development

ASP.NET bug with RadioButton GroupName in Repeater

by John Avis | September 1, 2019

I rediscovered a bug in ASP.NET that affects RadioButtons inside repeaters. Here is my solution to the problem.

Comments

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

Leave a Comment

Tags

About me

...random postings about web development and programming, Internet, computers, electronics and automotive topics.

Subscribe

Get the latest posts delivered to your inbox.