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.

Updated on April 19, 2017

Was this article helpful?