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.
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.
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 (
) 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="https://vimeo.com/40842620" data-speed="1">
...
</div>
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="https://www.youtube.com/watch?v=K8rpo9e7tvg" data-speed="1"></div>
<script type="text/javascript">
ready(function() {
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.
