Geek Answers Handbook

Responsive Height / Width Video Title

I am working on creating a responsive html5 header for a website, I would like it to respond both vertically and horizontally using CSS only for responsiveness.

http://jsfiddle.net/b9cpmuy9 is what I use for flexible width (with a borrowed video from another post here).

width:100%;height:auto; Works for flexible width.

I tried height:100%;width:auto;min-width:100%;for sensitive heights, but it only works to the full width of the source file, and when decreasing, only the clips on the right. I would like it to stay centered and clip on the left and right sides.

I would like it to work as follows: http://salleedesign.com/home , but with the video. It can be done?

UPDATE: http://jsfiddle.net/x22r8her/1/ I have something! The only thing that I do not see in this is that when it becomes small enough (in width), it starts to crop only to the right. Why is this?

+4
source share
1 answer

The HTML elements on the left and top are aligned. What you can do is expand the container to a large size and usemargin: auto

CSS example:

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/

+5
source

More articles:


All Articles