How to Add a Video Background to a Slides Template

A video background can be used to enhance the aesthetics and overall branding of a website. When done right, it can be a great way to improve your website’s look, capture user attention and tell your business’ story. But without following some important guidelines, it can ruin your site’s performance and mess up the overall design and experience. Here are some things to keep in mind when adding a video background to your site:

• The video should be muted by default. You can add opt-in sound if you prefer.
• You should include a placeholder image for browsers that don’t support HTML5 video to fall back on.
• Accessibility is important. You’ll probably place text on top of the video, so make sure it has enough contrast to be readable.
• Respect bandwidth. The video should be small and compressed as effectively as possible.
• Length is important: too short a video can feel repetitive when put on a loop, while too long becomes a narrative unto itself. Consider something between 12 – 30 seconds.

Let’s dive right in and add a video background to a Slides website.

Adding a Video Background to a Slide

We’ll add a video background to the following slide:

Here’s its code:

<section class="slide whiteSlide">
  <div class="content">
    <div class="container">
      <div class="wrap">
        <div class="fix-8-12">
          <h1 class="margin-bottom-2 ae-1">Heart of the image</h1>
          <p class="larger light ae-2"><span class="opacity-8">You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a&nbsp;reality.</span></p>
          <a class="button blue rounded cropBottom ae-5 fromCenter">Get Started for Free</a>
        </div>
      </div>
    </div>
  </div>
</section>

To add a background video to the slide, add a .background div to the section and use HTML5’s video inside that div. Also add a video class to the .slide element for some predefined styling.

<section class="slide whiteSlide video">
  <div class="content">
    ...
  </div>
  <div class="background">
    <video autoplay loop muted playsinline poster="assets/img/picture.jpg">
      <source src="assets/vids/video.mp4" type="video/mp4">
      <source src="assets/vids/video.webm" type="video/webm">
      <source src="assets/vids/video.ogv" type="video/ogv">
    </video>
  </div>
</section>

We include different video formats in case the page is opened in a browser that doesn’t support the other formats. In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.

We add the following attributes to the video tag:

• autoplay: if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
• loop: if specified, the browser will automatically seek back to the start upon reaching the end of the video.
• muted: if set, the audio will be initially silenced.
• playsinline: indicates that the video is to be played “inline”, i.e. within the element’s playback area. This is required for the video to play properly on some mobile devices.
• poster: gives the video an image to show while the video is loading or in case the video doesn’t load at all.

Here’s the slide with the background video:

The background video looks great, but the text in the foreground is barely readable. We should increase the contrast between the text and the dark background.

The whiteSlide class gives the content of a slide a dark color and white background. Remove it to make the text and navigation indicators white.

Let’s add a final effect to the background image to improve the website’s look. We add the fade-6 class to the section.

<section class="slide video fade-6">
  <div class="content">
    ...
  </div>
  <div class="background">
    <video autoplay loop muted playsinline poster="assets/img/picture.jpg">
      <source src="assets/vids/video.mp4" type="video/mp4">
      <source src="assets/vids/video.webm" type="video/webm">
      <source src="assets/vids/video.ogv" type="video/ogv">
    </video>
  </div>
</section>

You can fade a background image, color or video to varying degrees to achieve different blending effects. You can use the class fade-X to vary the amount of opacity of a background color, image or video used in your design. X is the amount of fade and its value goes from 1 to 9. You can see the effect below. The background video now takes less attention and the foreground text “pops out” more.

If you’d rather have a background image or color on your page instead of a background video, we have an in-depth guide on that as well.