Adding a Background Video on the Hero Area

In order to maintain the smooth parallax performance, the theme itself doesn’t have the option to add a background video on the hero area. However, this can be achieved using a Page Builder Plugin, which you may find useful for other areas of your website too.

To do that, follow the steps below:

Step 1 — Install the Page Builder by Site Origin Plugin

Install and activate the Page Builder by SiteOrigin plugin from Appearance → click on Plugins.

Step 2 — Install the Video Background’s Plugin

To be able to add a background video to any row, you need to install an addon that will extend the default plugin functionality. Get it from Video Backgrounds for SiteOrigin Page Builder.

Step 3 — Setup a New Page

Create a new Page and set the Default Template (No title) from Page Attributes section. This will remove the default Hero Area as we will replicate it using the Page Builder.

Step 4 — Add the Video Background

Using the Page Builder add a 1-one column row layout. Then edit the row and from the right side do the following changes (see screenshot):

  • Attributes → CSS Styles  add the following rule:HTML
    margin-top: -74px;
  • Layout → Row Layout → select the Full Width Stretched option.
  • Background Video  enable the Background Video option, add your video URL and select the desired options.

Step 5 — Add the Hero Content

Now that you have a full-width section with a background video, you may need to replicate the default hero content. Inside the above created row, add a widget type Text or Site Origin Editor (you need to install the Widgets Bundle extension) and paste the following code under Text tab (see screenshot):

Next, from the right side to the following changes:

HTML

<div class="flexbox">
 <div class="flexbox__item">
 <hgroup class="article__headline">
 [heading subtitle="Welcome" title="The Rosa"]
 <div class="headline__description">
 [hr color="light" type="line-flower"]
 <h5>Ready To Be Opened</h5> 
 [button link="#" size="small" class="button--light"]Explore[/button]
 </div>
 </hgroup>
 </div>
</div>
  • Attributes → Widget Class  add:
    • article__header article__header–page
  • Attributes → CSS Styles  add:

CSS

overflow: visible;
padding-top: 200px;
padding-bottom: 200px;

That’s it! Now you should have a full-width section with a background video. Tip: You can also use this plugin to manage your layout for different pages.

This article applies to Rosa, as they share the same underlying structure.

Updated on April 19, 2017

Was this article helpful?