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.
Is there any way to get rid of the flash of black bar at the top of the video on the demo when the page reloads or you move to another page? It’s not there when the page first loads but when you hit refresh or move to another page it is.
I’m having the same problem working off the Showcase Pro theme and think it’s a Chrome issue. Doesn’t appear on Edge or Firefox.
Your demo doesn’t appear to have a background image but even with one the black strip appears.
I don’t find the issue you mention in Chrome when reloading or navigating between the pages of my demo site. Can you check in another computer?
Hi Sridhar,
I’ve tested on another computer and with other sites that use the plugin, with and without Genesis, all with background fallback images, and all of them exhibit the same behaviour. A black strip flashes into view at the top of the video as it unloads when you either reload or navigate away from the page.
In other words, it’s something to do with the plugin, or there’s something weird going on with all of the Chrome installations I’ve touched.
Here is a screengrab of the demo site at the moment I reload or navigate away from the homepage – https://drive.google.com/file/d/0B0dD7F28Xck-VkFHak9xaUhrTjQ/view
Cheers,
Tony
It works perfectly in Parallax Pro
Alex
Well the above issue sorted itself out. Was really strange because it occurred on multiple computers/destinations. It may have been a Chrome update or possibly Wordfence cache interfered somehow (doubt it because it’s very reliable) or maybe a combination of both.
I’m using this in the front-page-3 section of Atmosphere Pro. Everything is working fine, except that the height of the video is much shorter than when I had it in front-page-1. How would I adjust this so it fills the screen like it did in front-page-1?
Sorry I can’t show you the site … client won’t allow it. 🙁
Try setting 100% viewport height as the height for that section.
Something like
https://snook.ca/archives/html_and_css/vm-vh-units
If that doesn’t work, try setting up a large top and bottom padding like 100px each to increase the height of that section.
Thank you! Setting a 100% viewport height worked.