如何在网页中添加视频循环作为背景？

Question

我正在尝试创建一个网页并想在后台添加一个循环播放的视频。我检查了所有的 youtube 教程，它可以独立运行，但是在你自己的模板上尝试它们会产生问题。我认为这些代码行存在问题所以我在这里添加包含 HTML 标签和 CSS.

的特定部分

HTML标签

    <!-- intro section
   ================================================== -->
   <section id="intro">

    <div class="intro-overlay"></div>
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
        <source src="../Profile/images/Meeting.mp4" type="video/mp4">
      </video>
       <div class="intro-content">
        <div class="row">

            <div class="col-twelve">

                <h5>Hello, World.</h5>
                <h1>I am Gokul Anand</h1>

                <p class="intro-position">
                    <span>Remote Sensing Geology</span>
                </p>

                <a class="button stroke smoothscroll" href="#about" title="">Click for More</a>

            </div>

        </div>
    </div> <!-- /intro-content -->



   </section> <!-- /intro -->

背景的CSS是

#intro {
    background: #151515 url(../images/Flythrough.jpeg) no-repeat center bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    min-height: 720px;
    display: table;
    position: relative;
    text-align: center;
    transition: 1s opacity;
}
.video {
    object-fit: cover;
    width: 100%;
    top: 0;
    left:0;
    position: absolute;
    object-fit: cover;
  }
.intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111111;
    opacity: .70;
}

.intro-content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    -webkit-transform: translateY(-2.1rem);
    -ms-transform: translateY(-2.1rem);
    transform: translateY(-2.1rem);
}

我尝试了几个教程，但除了扭曲内容之外没有任何效果。

Answer 1

您的 video 标签应该在 div 中。它应该看起来像这样：

<div class="fullscreen-bg">
     <video loop muted autoplay class="fullscreen-bg_video">
          <source src="Video/videoname.mp4" type="video/mp4">
     </video>
</div>

最重要的部分是 CSS 文件，在本例中应该如下所示：

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

最重要的部分是z-index。它指定元素的堆叠顺序，具有较大堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。对于 -100，它肯定在后台。这仅适用于定位元素（必须定义 poistion:）。

Answer 2

你可以这样做：

<div class="banner">
  <div class="background-gradient">
  <video autoplay muted loop id="myVideo" poster="images/screenshot.png">
    <source src="images/Background_Loop_small.mp4" type="video/mp4">
  </video>
</div>

.banner {
  position: relative;
}

#myVideo {
  position: relative;
  z-index:0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

我在这里做的：www.oliviergirardot.com 你可以在这里访问整个代码： https://github.com/OGsoundFX/cv-profile

如何在网页中添加视频循环作为背景？

How to add video loop as Background in a webpage?

html

css

video