Question

使用Bootstrap 3我设法在我的主页上播放了一个respinsive视频，你可以看到它在这里工作：http://www.infiniteideamedia.com/test/我唯一的问题是在小于视频宽度的设备上（1280像素）视频仅在一侧切断。我更喜欢它保留了视频中心，并切断了双方的视频。这可能吗？与海报相同的问题是在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;

Answer 2

做你的建议，除非是背景图片，否则我从未见过它。在它开始向左的大小下，您可以使用响应式嵌入。否则，有很多数学，你基本上必须选择一些最小宽度或最大宽度并开始在视口外定位#vid，但需要多少猜测。

DEMO：https://jsbin.com/zowuze/1/

#vid {
    position: relative;
    padding-bottom: 40%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}
#vid video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media (min-width:1280px) { 
    #vid {
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        padding: 0;
        height:500px;
    }
    #vid video {
        width: auto;
        min-width: 100%;
        height: auto;
        position: static;
    }
}

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

2 个答案:

DEMO：https://jsbin.com/zowuze/1/