Magnolia - Video background on front page

The Magnolia theme has four widget areas on the Front Page that display a parallax background image. If you'd like to replace one of the background images with a video, here's how:

How to add a video background

1. Install and activate the Video Background plugin.

2. Create a new page on your site called "Home." In the page editor, scroll down to the Video Background meta box.

3. For the Container, put ".front-page-1" as shown below.

This adds the video background to the Front Page 1 widget area. If you want to add the video background to a different area, see the Tips section at the bottom of this page.

4. Under Link to mp4, you can either directly upload your video or link to the file hosted elsewhere. Publish the page.

Optional but recommended: upload a fallback background image for instances when the video cannot be rendered.

5. Go to WordPress > Settings > Reading. Under Your Homepage Displays, select A Static Page. For the homepage, select the "Home" page you created in step 2. And you're done!

Tips & Tricks

• The video background won't appear on your site until you have one or more widgets in Front Page 1. To add widgets, go to WordPress > Appearance > Widgets and drag widget(s) into the Front Page 1 widget area. The complete homepage setup instructions for Magnolia can be found here.
• This tutorial above adds a video background to Front Page 1, which is the first widget area on the homepage. If you want the video background to replace a different Front Page image section, you can put .front-page-3 or .front-page-5 or .front-page-7 for the Container in step 3.
• If you'd like to change the height of the video, add the following code snippet to your theme. How to add code snippets >

.front-page-1 { height: 600px; }

Change the 600px value to your desired height. If you used a different class for the video container (i.e. .front-page-3), use that class for the code snippet instead of .front-page-1.