Video backgrounds

Add visual interest to pages by playing a video in the background.

Video backgrounds

When designing your help center you don’t have to rely on static images and colors. When used properly, video backgrounds can be engaging and help create a sense of continuity between your help center and marketing website. Adding them to hero sections is a popular way of adding something special to your Home page.

You can use YouTube, Vimeo and HTML5 videos or browse sites like Pexels, Coverr and Pixabay for free stock footage.

Vimeo background video
YouTube background video

Although video backgrounds are most often paired with hero elements, they are flexible enough to be be used with any element. When applying a background video to a hero section it can be a good idea to use an overlay as shown in the example below. This ensures that the video is visible but doesn’t take away from the content or actions above it.

Hero section with background video

Installation

Update the footer.hbs template of your theme 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>

Creating video backgrounds

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

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

Video backgrounds can be added to any element in the help center using the jarallax JavaScript function, identifying the HTML element that you’d like to apply the video to.

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

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', () => {
    jarallax(document.querySelectorAll('.jarallax'), {
      // Options go here
    });
  });
</script>

The options described in the Jarallax documentation can be provided in an object or as data attributes on the target element.

Related extensions

Lightboxes Free

Lightboxes

Present images, videos and other content in a stylish lightbox.

Video library Free

Video library

Display YouTube videos in one of many different layouts.

Videos Free

Videos

Display YouTube, Vimeo and HTML5 videos using a beautiful player.