Question

我试图将视频背景放在网站上。

在find . -mtime +1 -exec rm {} \;尺寸上，一切正常，但在较小的设备上，视频不会居中。

我该如何解决这个问题？

我的index.html：

1920x1080

我的CSS：

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>video web</title>
<link rel="stylesheet" href="css/style.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script>
    document.createElement('video');
</script>
<![endif]-->

<script src="js/jquery.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>

<div id="container">
    <a href="mailto:website@videowebsite.com">
        <video autoplay loop poster="images/intro.jpg" id="bgvid" align="middle">
            <!--<source src="video/izba_intro.webm" type="video/webm">-->
            <source src="video/izba_intro.mp4" type="video/mp4">
        </video>
    </a>
</div>

</body>
</html>

我如何解决此问题以获得快速响应的视频背景？如果不编写javascript，是否可以在纯css3中获得此结果？

感谢您的帮助。

Answer 1

要修复它，你必须调整包含视频的css，告诉它两个部分的最小高度必须是100％。我遇到了类似的问题，我通过以下方式解决了这个问题：

#bgvid {
    position: absolute; right: 0; top: 0; z-index: -100;
    background: url(../images/intro.jpg) center no-repeat;
    min-width: 100%; min-height: 100%; margin: auto;
}

我已根据您的详细信息编辑了代码。如果有效，请告诉我。

Answer 2

你也可以使用：

video {
    width: 100%;
    height: 100vh; /* stretch to screen height */
}

Answer 3

我只是从另一个问题复制粘贴我的答案，这里的关键是保持中心。

<小时/> 免责声明：我只是在尝试使用网络开发（或任何类型的代码/脚本）大约9个月，所以不要认为我的解决方案没有错。有关已知问题，请参阅脚注。

我一直面临着同样的问题，我想我完全理解你在寻找什么。

基本上，无论屏幕宽度/高度如何，视频的水平和垂直边缘都不应进入视口，应保留纵横比，并且视频应垂直和水平居中。

1920x800 分辨率的视频示例：

*（缺少CSS供应商前缀）

<强> HTML

<div class="bg-vid-container">
    <video id="bg-vid" class="cover" poster="lib/img/bg-vid.poster.png" autoplay loop>
        <source src="lib/vid/bg-vid.mp4" type="video/mp4"/>
    </video>
</div>

<强> CSS

.bg-vid-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

video.cover {
    width: 100%;
    min-width: 240vh;
    height: auto;
}

将justify-content和align-items设置为中心的弹性框模型将使视频保持垂直和水平居中，overflow: hidden;停止不必要的滚动。

在这种情况下，min-width设置为240vh（视图高度单位，其中1vh =窗口高度的1％）。这是通过将纵横比缩放到100的高度来计算的（我使用Andrew Hedges'Aspect Ratio Calculator）。

1920x800缩放为 240 x100。

这样可以防止视频的高度降至100％以下，但如果浏览器窗口变宽，则仍允许其宽度为100％，只需增加其高度即可。

根据caniuse.com，弹性盒模型和vh单元都有很好的支持。

这在某些设备上的移动视觉上无法正常工作，键盘向上滑动会调整窗口的大小。我正在研究一个jQuery / CSS媒体查询解决方案。如果它们按预期工作，我会更新结果。 iOS 7对vh的支持也有点粗略。

在css3的网站上集中响应视频背景

3 个答案: