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