Video Backgrounds

Add parallax effects to YouTube, Vimeo, and self-hosted 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

npm install jarallax

Setup

Import and initialize the video extension before using video parallax:

ES Modules

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'
});

UMD (Browser)

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

1. Create HTML Structure

   <div class="jarallax">
     Your content here...
   </div>
   
2. Initialize with videoSrc

   JavaScript

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

   Data Attribute

   <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

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

Data Attribute

<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

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

Data Attribute

<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

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

With imgSrc option

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.

Next Steps

Advanced Options

Explore different parallax types and performance optimization

Events & Methods

Learn about the API for controlling parallax instances