文章/答案/技术大牛

发布

社区首页 >问答首页 >响应式网页设计视频容器空白

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

Stack Overflow用户

提问于 2019-05-26 13:05:25

回答 2查看 177关注 0票数 1

我正在尝试制作一个响应式的网站，我目前面临的问题是，当我最小化浏览器大小时，我的背景视频会留下一大块空白。它不填充标题的大小，后面的div显示在空格之后。

至于去掉video-container并在video-bg上使用100vw和100vh，我已经尝试过了，但它不起作用，因为我的视频在这一点上被放大了，并且没有显示整个视频。

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。

css

responsive

回答 2

Stack Overflow用户

发布于 2019-05-26 14:14:54

不知道你到底在找什么，因为你没有提到细节，如果你想要链接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

票数 2

Stack Overflow用户

发布于 2019-05-27 10:34:38

我想现在一切都会好的。

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56310798

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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