响应高度/宽度视频头 [英] Responsive Height/Width Video Header

问题描述

我正在为一个网站制作响应式html5视频标题，我想让它垂直和水平响应，只使用CSS响应。

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 是我用于自适应宽度（从这里的另一个帖子借来的视频）。

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; 适用于响应宽度。

我尝试了 height：100％; width：auto; min-width：100％; 用于响应高度，但它只能工作到源文件的全宽，并且当较小只剪辑到右边。

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.

我希望它像这样工作： http://salleedesign.com/home ，但带有视频。可以吗？

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/ 我有东西！这个唯一的错误，我可以看到，当它变得足够小（宽度），它开始剪辑只有在右边。为什么？

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?

推荐答案

HTML元素左对齐，顶部对齐。你可以做的是扩展容器到一个大的大小，并使用 margin：auto

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

示例CSS： / p>

Example CSS:

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

演示：http://jsfiddle.net/mLnsbyk1/

这篇关于响应高度/宽度视频头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！