Update on December 13, 2018
The method below is NOT recommended. Follow this instead.
Update on Sunday, May 17, 2015
The method below is NOT recommended. Follow this BigVideo.js method instead: http://sridharkatakam.com/how-to-replace-home-section-1s-parallax-image-background-with-video-background-using-bigvideo-js/
Carrie Atkins asks,
Hi, Love your tutorials! Looking to put the video in Parallax Pro, Studiopress. I want to use it as a background in one of the home page widgets. Any tips? Thanks!!!
In this tutorial I show how HTML5 video element can be set to appear like background for Home Section 1 in Parallax Pro. Since the video is going to be inline vs used as a background via jQuery script, the video will get resized proportionately as the screen width is reduced and at a specific width the video shall be replaced with an image.
Screenshot:
Screencast:
Step 1
Convert your mp4 video to ogv and webm formats using a software like the free Miro Video Converter. Upload these 3 files to /videos. Upload the poster or lower width background image to both /images and child theme directory's images directory.
Step 2
Remove Home Section 1 from Customizer.
a) Edit lib/customize.php.
Change
