Adding a Background Video on the Hero Area

In order to main­tain the smooth par­al­lax per­for­mance, the theme itself doesn’t have the option to add a back­ground video on the hero area. How­ev­er, this can be achieved using a Page Builder Plu­g­in, which you may find use­ful for oth­er areas of your web­site too.

To do that, fol­low the steps below:

Step 1 — Install the Page Builder by Site Origin Plugin

Install and acti­vate the Page Builder by Site­O­ri­gin plu­g­in from Appear­ance → click on Plu­g­ins.

Step 2 — Install the Video Background’s Plugin

To be able to add a back­ground video to any row, you need to install an addon that will extend the default plu­g­in func­tion­al­i­ty. Get it from Video Back­grounds for Site­O­ri­gin Page Builder.

Step 3 — Setup a New Page

Cre­ate a new Page and set the Default Tem­plate (No title) from Page Attrib­ut­es sec­tion. This will remove the default Hero Area as we will repli­cate it using the Page Builder.

Step 4 — Add the Video Background

Using the Page Builder add a 1-one col­umn row lay­out. Then edit the row and from the right side do the fol­low­ing changes (see screen­shot):

  • Attrib­ut­es → CSS Styles  add the fol­low­ing rule:HTML
    margin-top: -74px;
  • Lay­out → Row Lay­out → select the Full Width Stretched option.
  • Back­ground Video  enable the Back­ground Video option, add your video URL and select the desired options.

Step 5 — Add the Hero Content

Now that you have a full-width sec­tion with a back­ground video, you may need to repli­cate the default hero con­tent. Inside the above cre­at­ed row, add a wid­get type Text or Site Ori­gin Edi­tor (you need to install the Wid­gets Bun­dle exten­sion) and paste the fol­low­ing code under Text tab (see screen­shot):

Next, from the right side to the fol­low­ing 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>
  • Attrib­ut­es → Wid­get Class  add:
    • article__header article__header–page
  • Attrib­ut­es → CSS Styles  add:

CSS

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

That’s it! Now you should have a full-width sec­tion with a back­ground video. Tip: You can also use this plu­g­in to man­age your lay­out for dif­fer­ent pages.

Updated on April 19, 2017

Was this article helpful?