html - 如何在屏幕上制作响应式 HTML5 视频中心，

Question

使用 Bootstrap 3，我成功地在我的主页上播放了一个响应式视频，您可以在这里看到它的工作情况:http://www.infiniteideamedia.com/test/我遇到的唯一问题是，在小于视频宽度(1280px)的设备上，视频仅在一侧被切断。我希望它保留视频中心并从两侧剪切视频。这可能吗？海报也有同样的问题，海报显示在 iOS 设备上，而不是视频上。这是目前的代码:

HTML:

<div id="vid">
        <video autoplay loop poster="img/Poster.jpg">
          <source src="img/homevideo.webm" type="video/webm"/>
          <source src="img/homevideo.mp4" type="video/mp4"/>
        </video>
        </div>

CSS:

#vid
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
#vid video {
width:auto;
min-width:100%;
height:auto;
min-height:500px;
}

我得出的结论是，我可能需要使用 JS 替代方案，任何有关如何实现它的提示都会很棒。

Answer 1

经过一番研究，实际上这里还有另一篇文章。这样做可以满足我的需要:

position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;