In the past I wrote a tutorial on setting up looping video background for the top visible portion of the homepage in Altitude Pro here.
Today I am going to show how BigVideo can be used to set up the same. This method is more robust (does not have the "background overlay showing up as the window size is reduced" problem) and is preferred over the other.
Note: Auto play of videos (background or not) in handheld devices does not work esp. those by Apple. This is a limitation or rather a design decision taken by device manufacturing companies to reduce unnecessary data loading costs on tablets and mobiles. As such the background video being discussed in this tutorial appears only for desktops. On handhelds, fully stretched image will appear in place of the video.
Step 1
Convert your desired Front Page 1 section's background mp4 video to ogv and webm formats using a software like the free Miro Video Converter. Upload these 3 files to /vids under your site's root directory (sample screenshot given at the end of step 4).
Create a static image of this video. Miro has a 'Create Thumbnails' setting that can be used to generate this image. Go to Appearance > Customize and set this as 'Featured Section 1 image' in the 'Front Page Background Images' section.
Step 2
Upload these files to Altitude Pro's js directory:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
