Sridhar Katakam

Genesis and WordPress Tutorials

How to replace image background with a video for Front Page 1 section of Altitude Pro

by 7 Comments

Update on February 02, 2017:

DO NOT use the methods mentioned below. Use Video Background plugin instead. Ex.: https://sridharkatakam.com/video-background-infinity-pro/

Update on Friday, May 15, 2015:

DO NOT use the method below. Use BigVideo.js method explained here instead.

In this article I show how the code from my earlier Post titled Video background section in Parallax Pro can be adapted for use in Altitude Pro.

Screencast:

Note: The result is not 100% responsive, there will be some portion of dark background overlay that will be visible as the screen width is reduced. At 1024px and below we are going to replace the video with a background image and use background-size: cover. Even then the entire image will not be visible. You can specify properly sized background images for popular devices like iPad and iPhone via media queries in the stylesheet. That's not covered in the code.

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.

Screen Shot 2015-02-25 at 12.35.31 pm

Step 2

Remove Front Page 1 from Customizer.

a) Edit lib/customize.php.

Change

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Nice to see more and more complex tutorials. I do have a question though: can the first background image be replaced by the Genesis Responsive Slider plugin?

    Reply
    • >