Question

我创建了一个全屏背景的网站。它在Safari和IE上工作正常但在谷歌浏览器上没有，视频没有居中，完全在屏幕的右上角切割。

CSS和HTML：

＆＃13;

#Video-Background {
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}

＆＃13;

<video id="video-background" autoplay="autoplay" loop>
    <source src="Reel 2015-simovie.webmhd.webm" type="video/webm">
    <source src="Reel 2015-simovie.mp4" type="video/mp4">
    <source src="Reel 2015-simovie.oggtheora.ogv" type="video/ogg">
</video>

＆＃13;

请查看我的内容，以便在simovie-p.com上看到它的样子。

Answer 1

看起来您的视频居中代码不正确。您将left和top设置为0。您尝试使用的转换中心技巧要求left和top都为50%，转换为-50%。

#Video-Background {
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}

如果您不包括-webkit-或IE8及更早版本的-ms-（Safari）和transform（IE9）供应商前缀，这似乎可以在IE和Safari中使用不支持变换或视频元素。

（在您的示例中，您的ID选择器中也有不同的字母大小写，但在您的网站上并非如此，所以我猜这不是您的问题。）

Answer 2

尝试使用

设置样式

#video-background {
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}

全屏背景html5无法与谷歌浏览器浏览器

2 个答案: