Question

我仅在Safari中看到该问题，Chrome和Firefox均可根据需要运行。似乎在Safari中，它正在加载.video-container>视频高度：100％，而不是宽度：100％。有没有人遇到这个问题或知道可能的解决方案？

网站构建网址：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

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

背景视频出现问题-仅Safari-全宽和全高

1 个答案: