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
- Attributes → CSS Styles → add the following rule:HTML
- 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:
<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:
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.