css - 背景视频问题 - 仅限 Safari - 全宽和全高

Question

我只在 Safari 中看到这个问题，Chrome 和 Firefox 都可以按需工作。似乎在 Safari 中它正在加载 .video-container > video height:100% 但不是 width:100%。有没有人遇到过这个问题或知道可能的解决方案？

站点构建 URL:http://betterbrands.3rfocuslabs.com

我的风格:

video#bgvid {
background: url(images/home/bg-video.jpg) no-repeat;
background-size: cover;
}
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.video-container > video {
display: block;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
@media screen and (max-aspect-ratio: 1920/1080) {
.video-container > video {
height: 100%;
}
}
@media screen and (min-aspect-ratio: 1920/1080) {
.video-container > video {
width: 100%;
}
}

我的代码:

<div class="video-container">
<video autoplay loop muted poster="<?php bloginfo('template_directory'); ?>/home/bg-video.jpg" id="bgvid">
<source src="<?php bloginfo('template_directory'); ?>/video/beer.mp4" type="video/mp4">
<source src="<?php bloginfo('template_directory'); ?>/video/beer.ogg" type="video/ogg">
<source src="<?php bloginfo('template_directory'); ?>/video/beer.webm" type="video/webm">
</video>
</div>

Answer 1

Safari 中存在视口(viewport)单位 ( https://bugs.webkit.org/show_bug.cgi?id=145614 ) 的错误。我想这是一个整体的错误。似乎他们仅在今年五月才开始支持此功能。所以问题是可能的。 https://caniuse.com/#feat=viewport-units检查已知问题和浏览器版本支持。