响应高度/宽度视频标题

我正在为一个网站制作一个响应式html5视频标题,我希望它能够垂直和水平响应,仅使用CSS进行响应.

http://jsfiddle.net/b9cpmuy9 是我用于响应宽度的(使用来自另一个帖子的借来的视频).

width:100%;height:auto; 适用于响应宽度.

我尝试height:100%;width:auto;min-width:100%;了响应高度,但它只能在源文件的整个宽度之前工作,而当较小时只在右边剪辑.我希望它保持居中并从左侧和右侧剪辑.

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

更新: http ://jsfiddle.net/x22r8her/1/我有东西!我能看到的唯一错误就是当它变得足够小(宽度方向)时,它只在右侧开始剪切.这是为什么？

HTML元素左对齐和顶部对齐.您可以做的是将容器扩展到大尺寸并使用margin: auto

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/