全屏视频引导调整大小问题答案

【问题标题】：FullScreen Video Bootstrap Resizing Issue全屏视频引导调整大小问题
【发布时间】：2016-01-31 16:02:30
【问题描述】：

我在引导模板中调整全屏视频大小时遇到问题。

这是一个活生生的例子？ 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;
      }
    }

【问题讨论】：

标签： css twitter-bootstrap-3 responsive-design

【解决方案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;
      }
    }

而且我认为您刚刚更新了网站，视频质量已经下降，并且当调整大小的视频被暂停时。您的最后一个配置很好，只是您将 width:600% 保留在 css 中的某个位置。

【讨论】：