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.