时间戳

首页 > 解决方案 > html半屏视频背景

html - html半屏视频背景

问题描述

我正在尝试在我的页面上将视频显示为横幅，但我也希望用户看到帖子和其他内容。lacity.org 是一个很好的例子，尝试做同样的事情，但是一旦我将宽度设置为 100%，我就无法设置高度

.video-container {
  width: 100%;
  overflow: hidden;
  display: block;
}

#video {
  object-fit: cover !important;
  max-width: 100%;
  height: auto;
}
<div class="video-container">
  <video class="video" id="video" autoplay="autoplay" loop="loop" muted="muted" preload="auto">
<source src="https://www.lacity.org/sites/g/files/wph1221/f/EchoPark_1920x800_loop.mp4" type="video/mp4">
Böngészője nem támogatja a  a HTML5 videót</video>
</div>

尝试使用 px 和 vh 设置高度，但它们没有响应。如果我将高度设置为 50%，则不会发生任何事情。示例：https ://www.lacity.org/

标签： htmlcss

解决方案

我将像这样向容器添加填充：

百分比设置取决于视频尺寸。

body, html {
  padding: 0;
  margin: 0;
}

.video-container {
  padding: 20.85% 0;
  width: 100%;
  position: relative;
}

#video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
<div class="video-container">
  <video class="video" id="video" autoplay="autoplay" loop="loop" muted="muted" preload="auto">
<source src="https://www.lacity.org/sites/g/files/wph1221/f/EchoPark_1920x800_loop.mp4" type="video/mp4">
Böngészője nem támogatja a  a HTML5 videót</video>
</div>

<p>Other content go here.</p>

推荐阅读