Responsive Height/Width Video Header

Question

I'm working on making a responsive html5 video header for a website, I would like it to respond vertically as well as horizontally, using CSS only for responsiveness.

http://jsfiddle.net/b9cpmuy9 is what I'm using for responsive width (with a borrowed video from another post on here).

width:100%;height:auto; works for responsive width.

I tried height:100%;width:auto;min-width:100%; for responsive height, but it only works up until the full width of the source file, and when smaller only clips to the right. I would like it to remain centered and clip from left and right sides.

I'd like it to work like this: http://salleedesign.com/home, but with video. Can it be done?

UPDATE: http://jsfiddle.net/x22r8her/1/ I've got something! The ONLY thing wrong with this that I can see is that when it gets small enough (width-wise) it starts clipping only on the right. Why is that?

No, I would rather it clipped off at the edges of its container — Ian Ebstein, Jan 22 '15 at 04:04
See here: http://stackoverflow.com/questions/28204932/video-height-and-width-for-responsive-website/41811314#41811314 — Giacomo Paita, Jan 23 '17 at 16:51

score 5 · Accepted Answer · answered Jan 22 '15 at 04:36

HTML elements are left and top aligned. What you could do is to expand the container to a large size and use margin: auto

Example CSS:

video {
    position:absolute;
    top: -99999px;
    bottom: -99999px;
    left: -99999px;
    right: -99999px;
    margin: auto;
    height: auto;
    min-height:100%;
    min-width:50%;
}

Demo: http://jsfiddle.net/mLnsbyk1/

Responsive Height/Width Video Header

1 Answers1

Linked