响应高度/宽度视频标题

Question

我正在为网站制作一个响应式的html5视频标题，我希望它可以垂直和水平响应，仅使用CSS来实现响应。

http://jsfiddle.net/b9cpmuy9是我正在使用的响应宽度（从此处的其他帖子中借来的视频）。

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

我尝试了height:100%;width:auto;min-width:100%;作为响应高度，但是它只能工作到源文件的整个宽度为止，而当较小时，仅向右剪辑。我希望它保持居中并从左侧和右侧进行剪切。

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

UPDATE： http://jsfiddle.net/x22r8her/1/我有东西！我可以看到的唯一错误是，当它变得足够小（沿宽度方向）时，它仅在右侧开始剪切。为什么会这样？

Answer 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/

Answer 2

感谢您的解决方案，请参见web design项目如何使用它>