Sections

Free

Premium

Video backgrounds

Add visual interest to hero sections and pages with video backgrounds.

In this article

Our themes fully support the Jarallax plugin, which provides parallax and video background effects. You can use YouTube, Vimeo and HTML5 videos or browse sites like Pexels, Coverr and Pixabay for free stock footage.

Examples

Vimeo background video 
  • <section data-jarallax data-jarallax-video="https://vimeo.com/40842620" data-speed="1">
  <div class="container">
    <div class="row align-items-center" style="min-height: 500px;">
      <div class="col h1 text-center text-white">
        Vimeo background video
      </div>
    </div>
  </div>
</section>
YouTube background video 
  • <section data-jarallax data-jarallax-video="https://www.youtube.com/watch?v=K8rpo9e7tvg" data-video-start-time="30" data-speed="1">
  <div class="container">
    <div class="row align-items-center" style="min-height: 500px;">
      <div class="col h1 text-center text-white">
        YouTube background video
      </div>
    </div>
  </div>
</section>

For more information, refer to the online documentation.

Installation

Update the document_head.hbs template to include <script> tags referencing the required Jarallax packages:

<script type="text/javascript" src="https://unpkg.com/jarallax@~1.11.0/dist/jarallax.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/jarallax@~1.11.0/dist/jarallax-video.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/jarallax@~1.11.0/dist/jarallax-element.min.js"></script>

Usage

Video backgrounds can be used in your page templates or in article and post content by editing the underlying code in the Source Code (Code icon) editor. Add the data-jarallax attribute to your element and specify the video URL with the data-jarallax-video attributes:

<section data-jarallax data-jarallax-video="https://vimeo.com/40842620" data-speed="1"></section>

If data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.

The Jarallax plugin can be instantiated using JavaScript. The jarallax function accepts a DOM node:

<section class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=K8rpo9e7tvg" data-speed="1"></section>

<script type="text/javascript">
  ready(function() {
    jarallax(document.querySelectorAll('.jarallax'));
  });
</script>