Video backgrounds

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

Usage

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>

Via data attributes

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 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.

Via JavaScript

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>

Examples

For more information, refer to the online documentation.