Step 1. get or create a video

While you can get free stock videos from websites like Pixabay or Pexels, you may choose to use your own footage.

For this tutorial, we're grabbing a free video from Pexels.

---

Step 2. ​Open Weebly's HTML/CSS Editor

At the top, click on 'Theme', and on the bottom-left, click on 'Edit HTML/CSS'.

---

Step 3. upload or host your video

In order for your website to use your video, it needs to know where it has been uploaded to. You can either upload your video to your Weebly site through the backend (1 GB or less), or have your video hosted on a separate hosting site (required for videos greater than 1 GB).

Note: Weebly's max video file upload size is 1 GB. Also ensure that your video file ends in a ".mp4" format.

​To upload your video to your Weebly site, on the left, click on the "+" icon to the right of "ASSETS". Select "New Folder" and name this folder "videos".

Then select the little gear icon to the right of the new "videos" folder you just created, select "Upload File(s)...", and select your video from your computer.

---

Step 4. create page layout

On the left under "HEADER TYPE", select "header.html". On the right, select and copy all of the coding within this file.

On the left, click on the "+" icon to the right of "HEADER TYPE" and select "New Header Type". Name this new page layout "video.html". On the right, delete all of the coding within the "video.html" file and paste the code you copied from the "header.html" file.

---

Step 5. Add HTML code

In the "video.html" file you just created, replace the banner coding with the HTML code below. For our particular theme, our banner code has the class "banner-wrap".

<div id="video">
    <div class="container">
        <div class="video">
            <video autoplay loop muted playsinline id="videoStyle">
                <source src="/files/theme/videos/" type="video/mp4"/>
            </video>
        </div>
        <div class="videoContent">
            <div class="container">{video-area:content global="false"}</div>
        </div>
    </div>
</div>

Note: To prevent the video background from playing on mobile devices, simply remove "playsinline" from the HTML code above as shown below in bold:

...
<video autoplay loop muted playsinline id="videoStyle">
​...

---

Step 6. Add Video File

Within the HTML file you added in the previous step, add the file name of the video you uploaded in step 3 as shown below in bold:

​<div id="video">
    <div class="container">
        <div class="video">
            <video autoplay loop muted playsinline id="videoStyle">
                <source src="/files/theme/videos/PexelsVideos2099568.mp4" type="video/mp4"/>​
            </video>
        </div>
        <div class="videoContent">
            <div class="container">{video-area:content global="false"}</div>
        </div>
    </div>
</div>

---

Step 7. Add CSS codes

On the left, click on "main.less", and on the right, add the CSS codes below to the CSS file, preferably beneath your theme's banner coding:

/* Video */
#video {
  position: relative;
  overflow: hidden;
}
#video:before {
  display: block;
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(0,0,0,0.1);
}
#video > .container {
  padding: 40px;
  box-sizing: border-box;
}
#video h2 {
  font-size: 54px;
  line-height: 1;
}
#video .paragraph {
  font-size: 22px;
  line-height: 1;
}
.video {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
#videoStyle {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.videoContent {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 992px) {
  #video h2 {
    font-size: 38px;
  }
}
@media screen and (max-width: 767px) {
  #video {
    margin-top: 50px;
  }
  #video .wsite-spacer {
    display: none;
  }
  #video h2 {
    font-size: 27px;
    margin-bottom: 10px;
  }
  #video .paragraph {
    font-size: 14px;
    margin-bottom: 10px;
  }
}​

​Click "SAVE".

---

Step 8. Apply video background

Once back in the Weebly Editor, apply your video background to any page of your choosing.

To do this, go to "Pages" at the top, and then on the left, select the page you want the video background to appear on. Under "HEADER TYPE", select "Video".

Note: Your video may not play within the Weebly Editor. This is normal, as the Weebly Editor can be a bit temperamental sometimes.

---

Step 9. Drag & drop elements

Go to "Build" at the top. On the left, grab your Weebly elements and start adding them to your video background on the right.

Note: While the video background will remain the same on every page you apply it to, the drag and drop area within the video background will be unique.

---

You're done! Publish your site to see your new video background!

---

Tips & Additional information

To change the opacity of your video background's overlay, simply adjust the bold code below in the CSS codes you added in step 7:

​#video:before {
  display: block;
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(0,0,0,0.5);
}

To change the color of your video background' overlay, simply adjust the bold code below in the CSS codes you added in step 7:

​#video:before {
  display: block;
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(255,0,177,0.5);
}

---

comments powered by Disqus