在标题和正文内容下带有背景视频的 CSS 代码答案

【问题标题】：CSS code with background video under header and body content在标题和正文内容下带有背景视频的 CSS 代码
【发布时间】：2019-09-24 02:23:20
【问题描述】：

我的页面顶部是一个标题，它是使用 php 从不同的文件/文件夹中提取的。

我希望将背景视频完全覆盖在我的内容正文和标题下。但是每当我放它时，它就只在我的内容下，并且标题由于某种原因而消失了。另外，当我只把它放在标题时，我只会把它放在顶部，而正文将是我的正常内容但没有背景视频。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

<video autoplay muted loop id="myVideo">
  <source src="https://www.belloo.date/upgrade/themes/landing2/images/bg.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

【问题讨论】：

@JeremyW 感谢语法更改，英语不是我母亲的语言，因此是德语。我很感激！ :))

标签： html css video background

【解决方案1】：

我不知道你的意思，但也许这会对你有所帮助。
我在css中定义了标题。

header {
  position: fixed;
  top:0px;
  left: 0px;
  right:0px;
  min-width: 100%;
  z-index: 1;
  background-color: #fff;
  padding: 10px;
}

并放置标题标签

<header>My Header</header>

完整的 html 页面

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}
header {
  position: fixed;
  top:0px;
  left: 0px;
  right:0px;
  min-width: 100%;
  z-index: 1;
  background-color: #fff;
  padding: 10px;
}
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

<html>
  <head>
</head>
<body>
  <header>My Header</header>
<video autoplay muted loop id="myVideo">
  <source src="https://www.belloo.date/upgrade/themes/landing2/images/bg.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
</body>
</html>

【讨论】：

请证明和解释你的答案，并做出正确的sn-p
没用，但感谢您的回答！ :) Flavio Caruso 的回答非常好！

【解决方案2】：

我不知道这是否是您想要实现的目标，但您可以尝试添加一个 z-index 负数并进行一些 css 调整。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

#myVideo {
  position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}

<video autoplay muted loop id="myVideo">
  <source src="https://www.belloo.date/upgrade/themes/landing2/images/bg.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<h1>Test</h1>

【讨论】：

这就像一个魅力！大侠，太感谢你了。 :D 我试了几个小时，你在我发帖 10 分钟后就收到了 omg
感谢您的宝贵时间和帮助！