CODEWITHSUNDEEP
htmlcssvideo
Gokul Anand
Gokul Anand

Reputation: 197

How to add video loop as Background in a webpage?

I am trying to create a webpage and want to add a video as a loop in the background. I checked all the youtube tutorials and it works on its own but on trying those on your own templates it creates problems. I think the issue exists on these lines of codes So here I am adding the particular section which contains the HTML tags and CSS.

The HTML tag

    <!-- 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 -->

The CSS for the background is

#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);
}

I tried several tutorials but nothing worked other than distorting the content.

Upvotes: 0

Views: 3111

Answers (2)

Olivier Girardot
Olivier Girardot

Reputation: 409

You could do something like this:

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

I did it here: www.oliviergirardot.com an you can access the whole code here: https://github.com/OGsoundFX/cv-profile

Upvotes: 1

Nicole
Nicole

Reputation: 127

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).

Upvotes: 3

Related Questions