Full width HTML5 video without preserving the aspect ratio

johna 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.

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

Web Development

How to set up a debugging using the Turnkey Linux LAMP stack and VS Code

by johna | December 19, 2023
The second part in my guide to setting up a website and database using the Turnkey Linux LAMP stack.

Website Hosting Web Development

How to set up a website and database using the Turnkey Linux LAMP stack

by johna | November 18, 2023
If you need to host your own website for the purposes of web development, Turnkey Linux LAMP Stack is an easy to install all-in-one solution that you can set up on a spare computer or a VM (Virtual Machine).

Web Development

Intermittent "Unable to read data from the transport connection: net_io_connectionclosed" errors

by johna | May 6, 2020
If you are having intermittent problems sending email in .NET using System.Net.Mail consider switching libraries.

Comments

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

Leave a Comment

About

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

I recommend ASPnix for web hosting and Crazy Domains for domain registration.

Subscribe

Get the latest posts delivered to your inbox.