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


Update the footer.hbs template of your theme to include <script> tags referencing the required Jarallax packages:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></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 your element and specify the video URL with the data-jarallax-video attribute:

<div data-jarallax data-jarallax-video="" data-speed="1">

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

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="" data-speed="1"></div>

<script type="text/javascript">
  ready(function() {
    jarallax(document.querySelectorAll('.jarallax'), {
      // Options go here

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


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


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