在弹性盒中使用视频作为背景（多个部分必需的视频背景）

发布于 2025-02-12 18:31:50 字数 2487 浏览 1 评论 0 原文

我有一个带有四个flex部分的Div。

四个部分中有两个需要将视频用作BG。

但是该视频似乎不允许使用父母的100％高度。

就这样。

我搜索了很多。

看来该视频不尊重父母的高度/宽度，而只是视频高度/宽度。

预期：

所有选择都是相同的大小，需要两个视频背景。

 ＆lt; body＆gt;
  ＆lt; div id =“ a”＆gt;
    ＆lt; div＆gt;
      ＆lt; span＆gt; test＆lt;/span＆gt;
    ＆lt;/div＆gt;
    ＆lt; div＆gt;
      ＆lt; span＆gt; test＆lt;/span＆gt;
    ＆lt;/div＆gt;
    ＆lt; div＆gt;
      ＆lt;视频src =“ https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4”
      ＆lt; span＆gt; test＆lt;/span＆gt;
    ＆lt;/div＆gt;
    ＆lt; div＆gt;
      ＆lt;视频src =“ https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4”
      ＆lt; span＆gt; test＆lt;/span＆gt;
    ＆lt;/div＆gt;
  ＆lt;/div＆gt;
＆lt;/body＆gt;

原文

I have a div with four flex sections.

Two of the four sections need to use video as bg.

But the video looks like don't allow the use of 100% height of the parent.

That's all.

I have googled a lot.

It looks like the video doesn't respect the height/width of the parent, only the video height/width.

Expected:

All selections are the same size and need a video background for two.

https://jsfiddle.net/kgpfnq46/

body {
  margin: 0;
}

#a {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
}

#a div {
  flex: 1;
}

#a div span{
font-size: 50px;
color: white;
}

#a div video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
}

#a div:first-of-type {
  /* all image are only for tests! */
  background: url(https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000);
}

#a div:nth-of-type(2) {
  background: url(https://img.freepik.com/free-vector/hand-painted-background-violet-orange-colours_23-2148427578.jpg?w=2000);
}

<body>
  <div id="a">
    <div>
      <span>test</span>
    </div>
    <div>
      <span>test</span>
    </div>
    <div>
      <video src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"></video>
      <span>test</span>
    </div>
    <div>
      <video src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"></video>
      <span>test</span>
    </div>
  </div>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空‖城人不在 2025-02-19 18:31:50

一些修复程序：

您的视频标签是不正确的，
您需要添加位置：相对 to div parent，以便使用父母使用视频。位置：绝对
set z-index：-1 ，它将可选地用作背景视频

，您的 #A 背景（我更改为<<<<代码>部分），我猜你想要要将其添加到视频要与测试对比的区域，请将其删除并将其添加到 div :: after 之后

body {
  margin: 0;
}

section {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

div {
  flex: 1;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: -1;
}

span {
  font-size: 50px;
  color: white;
}

video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  z-index: -1;
}



div:first-of-type {
  /* all image are only for tests! */
  background: url(https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000);
}

div:nth-of-type(2) {
  background: url(https://img.freepik.com/free-vector/hand-painted-background-violet-orange-colours_23-2148427578.jpg?w=2000);
}

<section>
  <div>
    <span>test</span>
  </div>
  <div>
    <span>test</span>
  </div>
  <div>
    <video autoplay loop muted>
        <source
          src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
        />
      </video>
    <span>test</span>
  </div>
  <div>
    <video autoplay loop muted>
        <source
          src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"
        />
      </video>
    <span>test</span>
  </div>
</section>

A few fixes:

your video tag is not correct
you need to add position:relative to div parent in order to video fit inside the parent using position:absolute
set z-index:-1 so it will work as background video

Optionally, your #a background (which I changed to section), I'm guessing you want to add it to the areas where video are to make contrast with test, if so, then remove it and add it to div::after

body {
  margin: 0;
}

section {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

div {
  flex: 1;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: -1;
}

span {
  font-size: 50px;
  color: white;
}

video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  z-index: -1;
}



div:first-of-type {
  /* all image are only for tests! */
  background: url(https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000);
}

div:nth-of-type(2) {
  background: url(https://img.freepik.com/free-vector/hand-painted-background-violet-orange-colours_23-2148427578.jpg?w=2000);
}

<section>
  <div>
    <span>test</span>
  </div>
  <div>
    <span>test</span>
  </div>
  <div>
    <video autoplay loop muted>
        <source
          src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
        />
      </video>
    <span>test</span>
  </div>
  <div>
    <video autoplay loop muted>
        <source
          src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"
        />
      </video>
    <span>test</span>
  </div>
</section>

回复收藏 0 原文

~没有更多了~