响应式视频部分均具有 100vh 和 100vw 且未使用 position:fixed
Responsive Video sections all having 100vh and 100vw without using position:fixed
我想创建一个包含多个部分的单页网站。每个部分包含一个高度和宽度等于视口大小(100vh 和 100vw)的视频,这些视频一个接一个地堆叠(每个占据浏览器视口的全宽和全高)。
我在网上看到很少有教程解释如何使用固定位置来实现响应目的。
但是在其他部分我不希望视频作为背景。有没有办法让它发生?
(绝对位置不是一个选项,因为当我调整大小时它不会占据页面的全宽和全高,即使在使用@media 时也是如此)。
我只是想要这些响应式视频部分,以便它们不会在浏览器调整大小时中断或溢出。
编辑:
这是我的代码html
<section class="section1">
<video id="videoBG" autoplay muted loop>
<source src="style/vid/1_first.mp4" type="video/mp4">
</video>
</section>
<section class="section2">
<video id="videoBG2" autoplay muted loop>
<source src="style/vid/2_second.mp4" type="video/mp4">
</video>
</section>
和 css :
section {
height: 100vh;
}
.section1 #videoBG, .section2 #videoBG2 {
position: fixed;
z-index: -1;
}
/* Make video responsive for every size resizing*/
@media (min-aspect-ratio: 16/9) AND (min-aspect-ratio: 8/5) AND (min-aspect-ratio: 4/3) AND (min-aspect-ratio: 3/2){
.section1 #videoBG, .section2 #videoBG2{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) AND (max-aspect-ratio: 8/5) AND (max-aspect-ratio: 4/3) AND (max-aspect-ratio: 3/2) {
.section1 #videoBG, .section2 #videoBG2 {
width:auto;
height: 100%;
}
}
就问题而言。您需要将视频一个接一个地堆叠起来。所有视频部分都应该有 100vh。
我们的想法是将我们的视频部分包围在包装器容器中 (<main id="videosWrapper"><main>
)。
如果我们使用object-fit:cover
,问题就解决了。
#videosWrapper{
max-width:100vw;
max-height:100vh;
}
然后对于各个视频,使用以下 CSS:
.videoCSS{
width: 100%;
height:100%;
object-fit: cover;
}
检查下面的完整代码:
*{
margin:0;
padding:0;
box-sizing: border-box;
}
#videosWrapper{
max-width:100vw;
max-height:100vh;
}
.videoCSS{
min-width: 100%;
min-height:100%;
width:100%;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stack of full screen videos</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main id="videosWrapper">
<section class="section1">
<video class="videoCSS" autoplay muted loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
type="video/mp4" />
</video>
</section>
<section class="section2">
<video class="videoCSS" autoplay muted loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4"
type="video/mp4" />
</video>
</section>
<section class="section2">
<video class="videoCSS" autoplay muted loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
type="video/mp4" />
</video>
</section>
</main>
</body>
</html>
注意: object-fit:cover
不适用于 IE/Edge。
我想创建一个包含多个部分的单页网站。每个部分包含一个高度和宽度等于视口大小(100vh 和 100vw)的视频,这些视频一个接一个地堆叠(每个占据浏览器视口的全宽和全高)。
我在网上看到很少有教程解释如何使用固定位置来实现响应目的。 但是在其他部分我不希望视频作为背景。有没有办法让它发生? (绝对位置不是一个选项,因为当我调整大小时它不会占据页面的全宽和全高,即使在使用@media 时也是如此)。
我只是想要这些响应式视频部分,以便它们不会在浏览器调整大小时中断或溢出。
编辑:
这是我的代码html
<section class="section1">
<video id="videoBG" autoplay muted loop>
<source src="style/vid/1_first.mp4" type="video/mp4">
</video>
</section>
<section class="section2">
<video id="videoBG2" autoplay muted loop>
<source src="style/vid/2_second.mp4" type="video/mp4">
</video>
</section>
和 css :
section {
height: 100vh;
}
.section1 #videoBG, .section2 #videoBG2 {
position: fixed;
z-index: -1;
}
/* Make video responsive for every size resizing*/
@media (min-aspect-ratio: 16/9) AND (min-aspect-ratio: 8/5) AND (min-aspect-ratio: 4/3) AND (min-aspect-ratio: 3/2){
.section1 #videoBG, .section2 #videoBG2{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) AND (max-aspect-ratio: 8/5) AND (max-aspect-ratio: 4/3) AND (max-aspect-ratio: 3/2) {
.section1 #videoBG, .section2 #videoBG2 {
width:auto;
height: 100%;
}
}
就问题而言。您需要将视频一个接一个地堆叠起来。所有视频部分都应该有 100vh。
我们的想法是将我们的视频部分包围在包装器容器中 (<main id="videosWrapper"><main>
)。
如果我们使用object-fit:cover
,问题就解决了。
#videosWrapper{
max-width:100vw;
max-height:100vh;
}
然后对于各个视频,使用以下 CSS:
.videoCSS{
width: 100%;
height:100%;
object-fit: cover;
}
检查下面的完整代码:
*{
margin:0;
padding:0;
box-sizing: border-box;
}
#videosWrapper{
max-width:100vw;
max-height:100vh;
}
.videoCSS{
min-width: 100%;
min-height:100%;
width:100%;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stack of full screen videos</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main id="videosWrapper">
<section class="section1">
<video class="videoCSS" autoplay muted loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
type="video/mp4" />
</video>
</section>
<section class="section2">
<video class="videoCSS" autoplay muted loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4"
type="video/mp4" />
</video>
</section>
<section class="section2">
<video class="videoCSS" autoplay muted loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
type="video/mp4" />
</video>
</section>
</main>
</body>
</html>
注意: object-fit:cover
不适用于 IE/Edge。