Video Backgrounds

Jarallax supports video backgrounds with parallax effects through the video extension. This guide covers how to implement video parallax with different video sources.

Installation

The video extension requires both the core Jarallax library and the video extension:

npm install jarallax

Setup

Import and initialize the video extension before using video parallax:

ES Modules
UMD (Browser)

import { jarallax, jarallaxVideo } from 'jarallax';
import 'jarallax/dist/jarallax.min.css';

// Initialize video extension
jarallaxVideo();

// Now use Jarallax with video
jarallax(document.querySelectorAll('.jarallax'), {
  speed: 0.2,
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0'
});

<!-- Jarallax CSS -->
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet">

<!-- Jarallax JS -->
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>

<!-- Jarallax Video Extension -->
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax-video.min.js"></script>

<script>
  jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.2,
    videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0'
  });
</script>

The video extension uses the video-worker library internally to handle YouTube, Vimeo, and self-hosted videos.

YouTube Videos

YouTube videos are the most common video source for parallax backgrounds.

Create HTML Structure

<div class="jarallax">
  Your content here...
</div>

Initialize with videoSrc

JavaScript
Data Attribute

jarallax(document.querySelectorAll('.jarallax'), {
  speed: 0.2,
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0'
});

<div class="jarallax" 
     data-jarallax 
     data-video-src="https://www.youtube.com/watch?v=ab0TSkLe-E0">
  Your content here...
</div>

YouTube short URLs also work: https://youtu.be/ab0TSkLe-E0

Vimeo Videos

Vimeo videos work the same way as YouTube:

JavaScript
Data Attribute

jarallax(document.querySelectorAll('.jarallax'), {
  speed: 0.2,
  videoSrc: 'https://vimeo.com/110138539'
});

<div class="jarallax" 
     data-jarallax 
     data-video-src="https://vimeo.com/110138539">
  Your content here...
</div>

Self-Hosted Videos

For self-hosted videos, specify video formats prefixed with the format type:

JavaScript
Data Attribute

jarallax(document.querySelectorAll('.jarallax'), {
  speed: 0.2,
  videoSrc: 'mp4:./video/local-video.mp4,webm:./video/local-video.webm'
});

<div class="jarallax" 
     data-jarallax 
     data-video-src="mp4:./video/local-video.mp4,webm:./video/local-video.webm">
  Your content here...
</div>

You only need one video format, not all three. Providing multiple formats ensures maximum browser compatibility. Common formats: mp4, webm, ogv

Single Format Example

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'mp4:./video/local-video.mp4'
});

Video Configuration Options

videoStartTime

Start the video at a specific time in seconds.

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  videoStartTime: 10 // Start at 10 seconds
});

Default: 0

videoEndTime

End the video at a specific time in seconds.

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  videoStartTime: 10,
  videoEndTime: 60 // End at 60 seconds
});

Default: 0 (plays until the end)

videoLoop

Loop the video infinitely.

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  videoLoop: true // Default
});

Default: true

videoVolume

Set video volume from 0 to 100.

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  videoVolume: 50 // 50% volume
});

Default: 0 (muted)

Many browsers block autoplaying videos with sound. Keep videos muted for best compatibility.

videoPlayOnlyVisible

Play video only when it’s visible in the viewport.

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  videoPlayOnlyVisible: true // Default
});

Default: true

This option improves performance by pausing videos that are not visible.

videoLazyLoading

Load video only when it becomes visible in the viewport.

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  videoLazyLoading: true // Default
});

Default: true

Lazy loading significantly improves initial page load performance when you have multiple video backgrounds.

videoClass

CSS class added to the video element.

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  videoClass: 'jarallax-video' // Default
});

Default: 'jarallax-video'The video type is automatically appended: jarallax-video-youtube, jarallax-video-vimeo, or jarallax-video-local

Disable Videos on Mobile

You can disable video loading on mobile devices to improve performance:

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  disableVideo: /iPad|iPhone|iPod|Android/
});

Or using a function:

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  disableVideo: function() {
    return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
  }
});

When disableVideo is active, Jarallax will display a fallback image instead (either from imgSrc option or the video thumbnail).

Adding Fallback Images

Provide a fallback image for when the video is loading or disabled:

With jarallax-img
With imgSrc option

<div class="jarallax" data-video-src="https://www.youtube.com/watch?v=ab0TSkLe-E0">
  <img class="jarallax-img" src="fallback-image.jpg" alt="">
  Your content here...
</div>

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  imgSrc: 'fallback-image.jpg'
});

For self-hosted videos, the fallback image is automatically set as the video poster attribute.

Video Events

The video extension provides additional events for video lifecycle management:

onVideoInsert

Called when the video element is inserted into the DOM.

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  onVideoInsert: function() {
    console.log('Video element inserted');
    console.log('Video element:', this.$video);
  }
});

Access the video element via this.$video

onVideoWorkerInit

Called when the VideoWorker instance is initialized.

jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
  onVideoWorkerInit: function(videoWorker) {
    console.log('VideoWorker initialized:', videoWorker);
    
    // Access VideoWorker methods
    videoWorker.on('ready', function() {
      console.log('Video is ready');
    });
  }
});

The VideoWorker instance is passed as a parameter.

Complete Video Example

Here’s a complete example with YouTube video:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Video Parallax Example</title>
    
    <!-- Jarallax CSS -->
    <link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet">
    
    <style>
      .jarallax {
        position: relative;
        min-height: 600px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .content {
        position: relative;
        z-index: 1;
        text-align: center;
        background: rgba(0,0,0,0.5);
        padding: 2rem;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <div class="jarallax" data-video-src="https://www.youtube.com/watch?v=mru3Q5m4lkY">
      <img class="jarallax-img" src="fallback.jpg" alt="">
      <div class="content">
        <h1>Video Parallax</h1>
        <p>Smooth parallax scrolling with video background</p>
      </div>
    </div>

    <!-- Jarallax JS -->
    <script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax-video.min.js"></script>
    
    <script>
      jarallax(document.querySelectorAll('.jarallax'), {
        speed: 0.2,
        videoLoop: true,
        videoPlayOnlyVisible: true
      });
    </script>
  </body>
</html>

Advanced: Multiple Videos

You can have multiple video backgrounds on the same page:

<!-- YouTube Video -->
<div class="jarallax" data-video-src="https://www.youtube.com/watch?v=ab0TSkLe-E0">
  <h2>YouTube Video</h2>
</div>

<!-- Vimeo Video -->
<div class="jarallax" data-video-src="https://vimeo.com/110138539">
  <h2>Vimeo Video</h2>
</div>

<!-- Self-Hosted Video -->
<div class="jarallax" data-video-src="mp4:./video/local.mp4">
  <h2>Local Video</h2>
</div>

<script>
  jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.2,
    videoLazyLoading: true,
    videoPlayOnlyVisible: true
  });
</script>

With videoLazyLoading and videoPlayOnlyVisible enabled, only visible videos will load and play, optimizing performance.

Get Started

Guides

Examples

Video Backgrounds

Installation

Setup

YouTube Videos

Vimeo Videos

Self-Hosted Videos

Single Format Example

Video Configuration Options

Disable Videos on Mobile

Adding Fallback Images

Video Events

Complete Video Example

Advanced: Multiple Videos

Next Steps

Advanced Options

Events & Methods

Build docs developers (and LLMs) love

Get Started

Guides

Examples

​Installation

​Setup

​YouTube Videos

​Vimeo Videos

​Self-Hosted Videos

​Single Format Example

​Video Configuration Options

​Disable Videos on Mobile

​Adding Fallback Images

​Video Events

​Complete Video Example

​Advanced: Multiple Videos

​Next Steps

Advanced Options

Events & Methods

Build docs developers (and LLMs) love

Installation

Setup

YouTube Videos

Vimeo Videos

Self-Hosted Videos

Single Format Example

Video Configuration Options

Disable Videos on Mobile

Adding Fallback Images

Video Events

Complete Video Example

Advanced: Multiple Videos

Next Steps