时间戳

首页 > 解决方案 > 如何在网页中添加视频循环作为背景？

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

问题描述

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

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

标签： htmlcssvideo

解决方案

Your video tag should be in a div. It should look something like this:

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

Most important part is the CSS file which in this case should look something like this:

.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%;
}

The most important part is the z-index. It specifies the stack order of the elements and an element with a greater stack order is always in front of an element with a lower stack order. With a -100 it certainly is in the background. This only works on positioned elements though (poistion: must be defined).

推荐阅读