In this tutorial we shall set up a background video on top of the front image in Atmosphere Pro using Video Background WordPress plugin.
Using this plugin for background video (for the entire body or for a specific div) is certainly the best and easiest method thus far. The only caveat at this time is that the plugin's .js file (a small 4.4 KB one) loads on all pages of the site even if the background video is set on a specific Page. I've brought this to the developer's attention here. One way around this is to directly use the jQuery version instead of the WP plugin. But that's not covered here for now.
We will also fix the jQuery code in the theme to ensure that front page 1 section takes up the exact height of viewport minus admin bar (if present) minus the header height, per this tutorial.
Note: On tablets and mobiles poster image will appear in place of the background video. This is a good design decision to lessen data consumption on portable devices.
Step 1
Install and activate wordpress.org/plugins/video-background.
Step 2
The video files can be uploaded from within WP editor or their URLs entered. In this example we shall upload the files to a videos directory under site's root and specify their URLs.
Upload your video in mp4 and webm formats and the poster image to /videos directory.
Step 3
To view the full content, please sign up for the membership.
Already a member? Log in below or here.