Add A Video Background To Your Website With Vide.js

Add A Video Background To Your Website With Vide.js


SHARE & COMMENT

Happy Monday! Today, we are introducing Vide.js! Like the author says, this jQuery plugin helps you out to add video backgrounds to your website in no time:

Vide: easy as hell jQuery plugin for video backgrounds

Ilya Makarov

Video backgrounds are trending all over the web. It sends a direct message to the user, in a unique and personalized way. If you ever wondered how you can add a video background to your website, this is one of the best options out there to get you started.

Features

  • Video resizes when screen resizes
  • Static background image is used when video can not play in browser (See support section for more details on device support)
  • Video can be played as background, but it can be played on an specific block element as well

Instructions

The first step to add Vide.js is to include the plugin in your html:

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

For better compatibility across browsers and platforms, it is recommended to have different video formats of the same video. See Mozilla Media Format Support Documentation for more details. In this case, it is recommended to save the video in different formats. For example: .mp4, .ogv, and .webm.

Also, it is highly recommended to save a thumbnail of the video in .jpg, .png, or .gif for when video playing is not allowed or disabled on the user’s device, the thumbnail will show instead. For example, iOS plays video from a browser only in the native player.

After saving all the video formats and the thumbnail as well, we just add data-vide-bg attribute to <body> element with the path to our video source. Voila! Now you have a video background for your website in just minutes!

Vide.js Demo

Vide.js Docs

 

Now that you know how to add a video background to your website using html and jQuery, we recommend you to go ahead an try it out. Video backgrounds in web design are here to stay and now you can use it for your next project.

 

SHARE & COMMENT