logo标签列表

Html5视频背景，保持视频中心在屏幕中央。

csshtmlvideo
41

我试图让背景视频保持居中，无论用户将视频拖得多大。目前，当我向较小的方向滚动时，它会切掉视频的右侧。这是我的代码：

<section id="home">
     <div class="video_shader"></div>
        <div class="video_contain">
            <video autoplay="" loop="" poster="img/still.jpg" id="bgvid">
              <source src="/realWebm.webm" type="video/webm" />
              <source src="/realdeal.mp4" type="video/mp4">
              <source src="/reaOg.ogv" type="video/ogg" />
            </video>
        </div>
</section>

.video_contain{
display: block;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}

video {
min-width: 100%;
 min-height: 100%;
z-index: -100;
background-position: center;
background-size: cover;
}

#home {
width: 100vw;
height: 100vh;
display:block;
position: relative;
}

我希望视频的中心始终是页面的中心，即使两侧被裁剪也没关系 - 如果以这种方式发生那就太理想了。非常感谢您的阅读和帮助。

10个回答
45

以下是我通常制作背景视频的方法，以及我在stre.am登陆页面上的制作过程：

.video_contain {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}

video {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
}

适用于移动设备的流媒体全屏视频

2
这很好用，直到我遇到移动设备尺寸。有什么建议吗？谢谢！ - ajmajmajma
1
在移动设备上，它不应该有任何不同的行为。确保您没有任何媒体查询样式干扰。我已经附上了一个图片，展示了在移动设备上应该是什么样子。 - Todd
30

这个更短，对我很有用。

video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(calc((100% - 100vw) / 2));
}
完全是最佳答案，@Pezcraft。在我的情况下，我所需要的仅仅是包含你的代码中的两行，它对我来说完美地工作了。非常感谢你的贡献。 - Vince
完美运行。我猜你是从W3Schools得到了原始代码。我所做的就是添加了transform属性，我的视频正按照我想要的方式工作。谢谢！ - user3444710
这会在右侧创建一个奇怪的溢出（视频宽度> 100％）。 - zavidovych
使用Bootstrap 5对我很有效。谢谢！ - Taylor D
26

在我的使用情况中，我希望视频始终覆盖整个视口（无论视口纵横比是大于还是小于视频比例），上述解决方案并没有完全按照我的意图工作。相反，以下解决方案效果更好：

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.video-container > video {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media screen and (max-aspect-ratio: 1920/1080) {
  .video-container > video {
    height: 100%;
  }
}
@media screen and (min-aspect-ratio: 1920/1080) {
  .video-container > video {
    width: 100%;
  }
}

我的视频分辨率是1920x1080，在IE11及以上版本中可以正常播放（没有测试更低的版本）。

3
对我来说最好的方法是——此外，这是媒体查询的一个很好的应用！我在.video-container中添加了overflow:hidden;以防止移动设备上的左/右滚动。 - alanvitek
1
我也会在.video-container上应用position:fixed。 - Stephen Lane
非常干净和健壮 - Dan
1
我将min-width: 100％和min-height: 100％添加到了.video-container> video选择器中，将position更改为relative并为我们的视频通话工具添加了overflow: hidden。效果非常好。谢谢。 - Luchspeter
这个方法可行，而其它方法却不行。我根本不需要@media选择器，left:50%和translate: -50% 才是真正有效的。正如Luchspeter所说，隐藏容器上的溢出确实有帮助。 - Thomas
10
  .bg-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  .bg-video-wrap > video,
  .bg-video-wrap > iframe {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
  }
1
下次请添加一些描述，说明代码正在执行什么操作。 - PV8
不需要包装，只需要视频标签的4行代码。谢谢！ - Nathan
6

虽然我来晚了，但我想给出一个2020年的答案。这里有一个简单的解决方案，可以让你拥有一个居中且响应式的HTML视频，而不需要使用“固定”定位。它允许你从全屏幕介绍开始，并在开始滚动时添加一些文本。没有滚动条，没有烦人的东西。就是这么简单。

https://codepen.io/LuBre/pen/GRJVMqE?editors=1100

CSS

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  height: 100%;
  font-Family: Arial;
}

.video-container {
  display: grid;
  justify-items: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.video-container video {
  position: absolute;
  z-index: 1;
  top: 50%;
  left:50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%) translateY(-50%);
}
.video-text {
  z-index: 2; 
  color: #fff;
  text-align: center;
}
.video-container h1, .video-container h2  {
  margin: 0;
  font-size: 3rem;
}
.video-container h2  {
  font-size: 1.4rem;
  font-weight: normal;
  opacity: 0.6;
}

.page-content {
  line-height: 1.4rem;
  padding: 2rem;
}

HTML

<div class="video-container">
  <video autoplay muted loop>
    <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  </video>
  <div class="video-text">
    <h1>Catchy title</h1>
    <h2>Everyone loves catchy titles</h2>
  </div>
</div>

<div class="page-content">
<h1>New paragaph</h1>
Some random text goes here...
我正在研究这个视频相关的东西，试图弄清楚...你会如何将这样的东西变成一个旋转木马？只是想知道是否有简单的方法。 - Damien
5

像其他使用绝对定位的元素一样将其居中

.video_contain {
    position: absolute;
    width: auto;
    min-height: 100%;
    min-width: 100%;
    left: 50%;
    transform: translate(-50%);
}
5
使用object-fit: cover;。
video {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  object-fit: cover;
}
1

这对我起作用了

.video_contain {
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: none;
}

#bgvid {
  margin: auto;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: visible;
  width: 1267px;
  height: auto;
}
0

这对我起到了奇效，始终保持视频居中，不需要担心视频的实际尺寸。

.video_contain {
  position: absolute;
  top: 0;
  left: 0;
  /** could be any size **/
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
video {
  display: block;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
0

所以我测试了上述解决方案，但没有找到那个，所以这是我的解决方案：

video {
      position: fixed;
      left: 50%;
      top: 50%;
      min-width: 100%;
      min-height: 100%;
      transform: translate(50%, -50%);
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接