Question

我有一个HTML5视频，它是我标题的背景。视频尺寸为1280 x 720.但在safari中，它们是HTML5视频顶部和底部的空间。此空间仅在Mac OS X上的safari上显示，这在Google Chrome，Mozilla Firefox，Microsoft Edge上显示正常。我尝试为display: block添加display和许多其他值，但没有奏效。此外，如果我进入Inspect Element并关闭display然后将其重新打开，它将再次开始工作。

另外提到这个网站是WordPress的自定义主题。

我的代码：

HTML：

    <div class="home-banner">

        <div class="fullscreen-bg clearfix">

            <!-- Video -->

            <video class="hidden-xs" loop autoplay muted poster="images/videoframe.jpg">

                <source src="video/trailer.mp4" type="video/mp4">

            </video>

        </div>
    </div>
</header>

CSS：

video {
    /*float: left;*/
    width: 100%;
}
.fullscreen-bg {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.fullscreen-bg .container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1111;
    right: 0;
    margin: 0 auto;
    width: 85% !important;
}
.home-banner {
    /*background-image: url(../images/home-banner.jpg);*/
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

他们对此有何更新？

Answer 1

我明白了。

我刚刚使用过：

video {
    /*float: left;*/
    min-width: 100%;
    min-width: 100%;
}

Safari上的HTML5视频空间？

1 个答案: