Question

我在引导程序模板中调整全屏视频的大小时出现问题。

这是实例吗？ http://velnikolic.com/toad/index.php#低于1400px，在Safari浏览器中，视频比率变得非常失真。

<div class="fullscreen-bg">
    <video loop muted autoplay poster="thumbnail.png" class="fullscreen-bg__video">

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

    </video>
</div>


/*Video*/

.fullscreen-bg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            z-index: -100;
            height: 600px;

        }

        .fullscreen-bg__video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 600px;
        }


        @media (min-aspect-ratio: 16/9) {
      .fullscreen-bg__video {
        width: 100%;
        height: auto;
      }
    }

Answer 1

我认为你应该考虑很少的网站优化技术。压缩缩略图和其他媒体内容以加快加载速度。我加载您的网站花了我一分多钟。

我注意到的另一件事是，当我切换到移动视图时，在调整浏览器窗口大小时。视频块消失了。您可以通过更改以下代码来更正在你的style.css第450行 -

    @media (max-width: 767px)
    .fullscreen-bg__video {
       display: inline-block;
       vertical-align:baseline;
    }

/*your this css settings are fine*/
 @media (min-aspect-ratio: 16/9) {
      .fullscreen-bg__video {
        width: 100%;
        height: auto;
      }
    }

我认为您刚刚更新了网站，视频质量下降，重新调整视频大小时暂停了。你的上一次配置很好，只是你在css的某个地方保持宽度：600％。

全屏视频引导调整问题

1 个答案: