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 August 25, 2020