In one of my earlier articles titled Video Background for Front Page 1 in Altitude Pro I showed how the background image in Front Page 1 section of Altitude Pro can be replaced with a background video using Coverr method.
In this tutorial I show how the same can be done in a much simpler way with far fewer number of steps using Vide jQuery script.
Note: Since this is a background video as opposed to a background image, resizing does not behave like background-size: cover and at smaller window sizes, background bleed will be visible at top and bottom depending on the aspect ratio of your video. This issue is present in Coverr method as well.
On tablets and mobiles, the poster image will appear in place of the video.
Step 1
Upload your video file in mp4, ogv and webm formats and the corresponding poster image with .jpg extension to your site root (where wp-config.php is) under a videos directory.
Step 2
Upload jquery.vide.min.js to the child theme's js directory.
Step 2
Edit front-page.php.
a) Below
Great!
Thanks Sridhar!! 😀