Question

我正在尝试创建一个响应式网站，而当前面临的问题是，当我最小化浏览器大小时，我的背景视频会留出很大一部分空白。它不填充标题的大小，并且之后的div会在空格之后显示。

就摆脱视频容器并在video-bg上使用100vw和100vh而言，我已经尝试了，但它不起作用，因为此时我的视频被放大了，并且无法显示整个视频。 / p>

https://www.videezy.com/urban/3951-top-to-bottom-panning-shot-of-downtown-los-angeles-4k

上面的链接是下载我正在使用的视频。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
body {
    margin: 0;
    padding: 0;
}
#block {
    background-color: black;
    height: 500px;
}
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; overflow: 
    hidden; 
    max-width: 100%; 
} 
.embed-container video, /*.embed-container object, .embed-container embed*/ { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
</style>
<body>
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div class='embed-container'>
            <video autoplay muted allowfullscreen>
                <source src="downtownla.mp4" type="video/mp4">
            </video>
        </div>
        <div id="block">
            1
        </div>
    </body>
</html>
</body>
</html>

我的预期目标是能够使视频具有响应性，并允许在没有任何空格后立即显示以下div。

Answer 1

不确定您要寻找的是什么，因为您没有提及有关要链接YouTube或链接中提到的内容的详细信息。

下面的网站将帮助您设置来自不同平台的自适应视频

https://embedresponsively.com/

YouTube嵌入式视频示例

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>

还要看看这个link

Answer 2

我想现在就可以了。

body {
  margin: 0;
}

.container-fluid .header {
  position: relative;
}

.video-container {
  z-index: -100;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
}

#video-bg {
  margin: 0 auto;
  width: 100%;
  min-width: 100vw;
  max-height: 100vh;
  height: 100%;
  display: block;
  object-fit: fill;
}

.block {
  width: 100%;
  height: 100vh;
}

#block1 {
  background: black;
}

#block2 {
  background: yellow;
}

#block3 {
  background: red;
}

<div class="container-fluid header"> 
  <div class="header">

    <div class="video-container">
      <video autoplay muted id="video-bg">

        <source src="https://static.videezy.com/system/resources/previews/000/003/951/original/downtownla.mp4" type="video/mp4"/>

      </video>
    </div> 
  </div>
</div>

<div id="block1" class="block">

</div>
<div id="block2" class="block">

</div>
<div id="block3" class="block">

</div>

响应式网页设计视频容器空白

2 个答案: