Mobile Safari iPad中“全屏”视频元素的垂直居中

时间:2015-04-17 20:37:53

标签: html5 css3 ipad html5-video mobile-safari

我最近遇到了一些麻烦,我的网站上的视频元素不会在“全屏模式”(意味着延伸到整个窗口的div)上仅在iPad(iOS 8.3)移动Safari上垂直居中。

在许多试验和错误中,我遇到了一种奇特的行为。当绝对定位视频拉伸到整个高度和宽度并设置边距自动时,视频元素垂直居中:

编辑:请注意,您需要减小小提琴中结果部分的宽度才能查看效果。

Fiddle

HTML

<div class="hello">
  <video src="foo"></video>
</div>

CSS

.hello {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: auto;
}

这适用于移动版Safari,似乎对Chrome Android或Firefox没有任何不利影响。它也可以在桌面浏览器上运行。当我完全拉伸视频时,这个边距如何垂直居中?

1 个答案:

答案 0 :(得分:0)

如果没有实际的视频源,你的小提琴就无法运作。我无法重现你所描述的由边距触发的行为。但是我确实在我自己的搜索中发现了一个问题,即在iOS上垂直居中显示视频。也许我的结论会帮助你:

当前的iOS浏览器会在视频底部留下空白区域(假设视频元素高于必须渲染视频的视频元素)。底部的空白区域只要小于本机控件的大小。这背后的明显想法是,不是在视频前面渲染控件,而是在可能的情况下在控制器下面。

这里有一个问题:如果您停用控件/没有使用“controls”属性激活它们,甚至会发生这种情况。我能想出的唯一解决方法是获得固有的宽度和宽度。视频高度和手动计算当前实际视频高度。然后你可以继续设置视频节点的高度,并根据你的情况设置一个上边距,使其在你的容器中垂直居中。

希望这会有所帮助。