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

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

我正在尝试创建网页，并希望在后台将视频添加为循环。我检查了所有的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);
}

我尝试了一些教程，但是除了扭曲内容之外没有其他作用。

解决方法

您的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:）。

,

您可以执行以下操作：

<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