HTML5 Video Respnsive Vertical Cover

Question

Is there a way to make a HTML5 video (and the poster attribute) to act like a centered background cover?

I've created a dummy pen you can play around width:

http://codepen.io/SEFarstad/pen/vujqE

The layout is based on two 50% width sections, where the left one will contain the fixed video and the right one will containt the absolute positioned content.

The main problem is that my design needs to be split vertically, making horizontal videos an issue. Is there a way to make these horizontal videos full height in a vertically based layout it like this? -in the same manner as you use background-size: cover;

I know you can use background videos etc but I need this to have controls, posters and so on to meet some interactivity demands I have on this project.

Answer 1

I know this is an old question and you've probably moved on to other things, but I wanted to answer just in case anybody else stumbles on to this via Google. What you were looking for was object-fit, a way to add that kind of behavior to videos and images. Here's some info on it, but basically you just need to write it like this:

video {
  ... // other stuff here
  object-fit: cover;
}

Sadly, you can't use this on every browser just yet. However, there's a polyfill you can look into.