covervid.js Utilization Guide: How to Make Videos (MP4/WebM) a Compelling Background with the HTML video Tag

In the world of web development, using a video as a background can further enhance the appeal of a site.
Here, we’ll introduce how to set a video as a background using covervid.js with the HTML video tag in a way that’s easy for beginners to understand. With this technique, you can transform your website into something dynamic and visually engaging.

We will show you how to display videos (mp4, webm) in the video tag as a background using covervid.js.

Basic CSS for Setting a Video as the Background

First, let’s look at the basic CSS for setting a video as the website background. Here, we explain how to configure CSS for the container that encloses the video.
This is the CSS description for the area (.treewrap) that wraps the video tag.

<style>
html, body {
  margin: 0;
  font-size: 16px;
  text-align: center;
}
.treewrap{
    position: relative;
    min-width: 720px;
}
h1{
  text-align: center;
  font-size: 40px;
  padding: 50px 0 0 0;
  position: absolute;
  width: 100%;
  color: #ffffff;
}
.content{
  font-size: 40px;
  padding: 50px;
  font-weight: bold;
}
</style>

Setting the Video in HTML

Next, let’s see how to set up the video in HTML.
We prepared a video (tree.mp4) for the video tag (class=”treevideo”) used as a background. The WebM file is not prepared, so it is commented out. The code below loads the video file with the video tag and sets it to autoplay and loop.

  <section class="treewrap">
    <video class="treevideo" autoplay loop muted poster="tree.jpg">
      <source src="tree.mp4" type="video/mp4">
<!--      <source src="tree.webm" type="video/webm">-->
    </video>
    <h1>Display the video tag’s video (mp4, webm) as a background using covervid.js</span></h1>
  </section>

  <section class="content">Content area</section>

Dynamic Size Adjustment with JavaScript

This explains how to configure JavaScript to dynamically adjust the video size according to the website’s viewport. Using jQuery and covervid.js, we achieve a full-screen display.

Load the files jquery.min.js (v1.10 series) and covervid.js. The process to make the background video fill the browser in fullscreen is written in the fullscreen() function. Set it with coverVid(document.querySelector(‘class name of the video tag’), video width size, video height size).

<script src="jquery.min.js"></script>
<script src="covervid.js"></script>

<script type="text/javascript">
fullscreen();
$(window).resize(fullscreen);

function fullscreen() {
  var treewrap = $('.treewrap');
  var windowH = $(window).height();
  var windowW = $(window).width();

  treewrap.width(windowW);
  treewrap.height(windowH);
}

coverVid(document.querySelector('.treevideo'), 640, 360);
</script>

Demo Page: Displaying Video Tag Videos (mp4, webm) as a Background Using covervid.js

You can check what kind of visuals this technique can achieve on the demo page below.

Demo page: Displaying video tag videos (mp4, webm) as a background using covervid.js

Source: covervid

Details of covervid.js can be found in the GitHub repository below.

covervid

Summary

Setting a video as the background is an effective way to catch users’ attention. Through this article, master the basic techniques and breathe new life into your website.

　
* If you reuse the code, please do so at your own risk.
Please do not reuse the Google Analytics tag in the head tag of the demo page.