Javascript Video Background with HTML5 & CSS

Category: Layout | April 6, 2019
Author: VodkaBears
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

Learn how to create a video background using Javascript. I will use a hell easy plugin to make a fullscreen HTML5 video. A little CSS will help me convert it into an awesome looking template.

With the help of this plugin, you can also easily create a full-width video background by simply setting the static height.

The plugin comes with some great and useful options for customizations. It’s a mobile-friendly and supports different browsers including mobile browsers.

Another great thing about the plugin — It’s a lightweight — Allow adding content over video and links.

With the help of its’ wide range of options, You can easily define poster, add a play button, volume controller or let it play silent.

Basic Usage

Download the plugin via bower install vide or from the above download link. As there is no CSS needed to add video as the background so just add the plugin js file.

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

For cross-browser compatibility, You need to prepare the video in several formats like ‘.webm’, ‘.mp4’, ‘.ogv’ and also add poster with .jpg.pngor .gif extension:

Don’t forget to add jQuery in your webpage document.

To quickly implement on your site without further coding, You can add a data-vide-bg attribute to a body element.

<body data-vide-bg="video/ocean">

There is no stylesheet need to make work this plugin but it is important to set both HTML and body tag width and height 100% with margin:0;

 <style>
    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
    }
  </style>

That’s dead simple. No need to do anything else but if you want to explore more in details, Let’s read the full article

A way of Implementation in Depth:

You can also add data-vide-bg attribute within the div by defining the path to video and poster. With the help of data-vide-options, You can pass the video options if you need it.

By default, the video is muted, looped and automatically starts.

<div style="width: 1000px; height: 500px;"
  data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>

Also, you can add different video formats, poster and define poster type in option.

<div style="width: 1000px; height: 500px;"
  data-vide-bg="mp4: path/to/video1, webm: path/to/video2, ogv: path/to/video3, poster: path/to/poster"
  data-vide-options="posterType: jpg, loop: false, muted: false, position: 0% 0%">
</div>

The Javascript Initialize

In some situations like adding multiple video backgrounds, it can be helpful to initialize it with JS.

$('#myBlock').vide('path/to/video');
$('#myBlock').vide('path/to/video', {
...options...
});
$('#myBlock').vide({
  mp4: path/to/video1,
  webm: path/to/video2,
  ogv: path/to/video3,
  poster: path/to/poster
}, {
...options...
});
$('#myBlock').vide('extended path as a string', 'options as a string');

Possibilities

To handle the functions of video, Here are a list of options and matching default values:

{
  volume: 1,
  playbackRate: 1,
  muted: true,
  loop: true,
  autoplay: true,
  position: '50% 50%', // Similar to the CSS `background-position` property.
  posterType: 'detect', // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
  resizing: true, // Auto-resizing, read: https://github.com/VodkaBears/Vide#resizing
  bgColor: 'transparent', // Allow custom background-color for Vide div,
  className: '' // Add custom CSS class to Vide div
}

Brower’s Support

There are a few features that you should note down while implementing on your live site.

  • It tested on all the modern desktop browser and working fine.
  • Whenever we talk about browser support for any plugin, We always have in mind IE and That’s what it support  IE9+
  • For iOS support, It plays video from a browser only in the native player. So the video for iOS is disabled, an only fullscreen poster will be used.
  • You surely have a question about android in your mind as well, Some of the Android devices play videos but some of not —go figure out it. On a few Android devices, the video is disabled and the only fullscreen poster will be shown.