PLAY VIDEO ON SCROLL – GSAP Scrolltrigger Elementor (No plugin)

Adding engaging and interactive elements to your website can enhance user experience and keep visitors on your site longer. In this tutorial, we’ll show you how to add a scroll-triggered video to your Elementor website without using any additional plugins! This effect will play the video when the user scrolls down and rewind it when scrolling up, giving a smooth and dynamic effect to your page.

Step 1: Create a New Page in Elementor

To begin, we need a new page where we’ll implement the scroll-triggered video.

1. Go to your WordPress Dashboard and click on Pages.
2. Click Add New to create a new page.
3. Give your page a title, like Scroll Video Effect, and click Edit with Elementor.

Step 2: Build the Page Structure and Header

Now, let’s add a header to the page and style it appropriately:

1. Add a Two-Column Section at the top of your page:

• One column will be for your logo and the other for your menu.

1. Drag and Drop an Image Widget into the left column:

• Upload your logo image and adjust its size as needed.
• Make sure the logo is visible and properly aligned.

1. Add a Navigation Menu in the right column:

• Style your menu to match your website’s theme.
• Adjust the column sizes, e.g., 25% for the logo and 75% for the menu.

1. Change the Background Color of your header section:

• Set a darker background color if your logo is white, making it stand out.

Step 3: Insert the Video Widget

Now, it’s time to add the video that will be triggered by scroll events.

1. Drag and Drop the Video Widget into a new section below the header.
2. In the Video Source dropdown, select Self-Hosted instead of YouTube.
3. Upload a Video File from your computer or use an existing file in your media library:

• Choose a small-sized video to avoid performance issues.
• Ensure the video suits your page content and theme.

1. Disable Player Controls and Set the Video to Mute:

• Go to the video settings and hide the player controls.
• Set the video to autoplay and mute so it runs seamlessly in the background.

Step 4: Apply Custom Code for Scroll-Triggered Video Effect

To make the video react to scroll events, we need to insert a custom script:

1. Go to the WordPress Dashboard and navigate to Elementor > Custom Code.
2. Click Add New to create a new custom code snippet.
3. Name it something like Scroll Video Effect.
4. Paste the following code into the snippet area:
5. Set the location of the code to Header.
6. Choose Singular and select the page you created earlier (e.g., Scroll Video Effect).
7. Click Publish to activate the code on that page.

Copy Code

<script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>
<script>
$( document ).ready(function() {
    console.clear();
    $('video').addClass('video-background');
const video = document.querySelector(".video-background");
let src = video.currentSrc || video.src;
console.log(video, src);
/* Make sure the video is 'activated' on iOS */
function once(el, event, fn, opts) {
  var onceFn = function (e) {
    el.removeEventListener(event, onceFn);
    fn.apply(this, arguments);
  };
  el.addEventListener(event, onceFn, opts);
  return onceFn;
}
once(document.documentElement, "touchstart", function (e) {
  video.play();
  video.pause();
});
gsap.registerPlugin(ScrollTrigger);
let tl = gsap.timeline({
  defaults: { duration: 1 },
  scrollTrigger: {
    trigger: "#container",
    start: "top top",
    end: "bottom bottom",
    scrub: true
  }
});
once(video, "loadedmetadata", () => {
  tl.fromTo(
    video,
    {
      currentTime: 0
    },
    {
      currentTime: video.duration || 1
    }
  );
});
/*!
     * © This code was written by Nicolai Palmkvist.
     * For more information, visit my Elementor Youtube channel: https://www.youtube.com/@nicopalmkvist
     */
setTimeout(function () {
  if (window["fetch"]) {
    fetch(src)
      .then((response) => response.blob())
      .then((response) => {
        var blobURL = URL.createObjectURL(response);
        var t = video.currentTime;
        once(document.documentElement, "touchstart", function (e) {
          video.play();
          video.pause();
        });
        video.setAttribute("src", blobURL);
        video.currentTime = t + 0.01;
      });
  }
}, 1000);
});
</script>

Step 5: Adjust the Scroll Effect Settings

Now that the code is added, let’s adjust the scroll effect settings:

1. Open the Elementor Editor and select the section with your video.
2. Go to the Advanced tab, and find Motion Effects.
3. Enable the Sticky effect and choose Top.
4. Set the Stay in Column option to Yes.

These settings will ensure that the video stays in view as you scroll, creating the desired effect.

Step 6: Additional Styling and Testing

To enhance the page further, you can add additional sections and elements to create a scrolling experience:

1. Create a Few Dummy Sections with text, images, or other content below your video.
2. Style each section with proper margins, padding, and background colors to ensure the video scroll effect is visible.

Step 7: Preview and Final Adjustments

Once everything is set up, it’s time to preview your work:

1. Click Preview in Elementor to see how your video responds to scrolling.
2. Make sure the video plays when scrolling down and rewinds when scrolling up.
3. Adjust any z-index values if other elements overlap with your video.

Final Thoughts

Adding a scroll-triggered video in Elementor without any plugins can significantly enhance your website’s interactivity and user experience. It’s a fantastic feature for showcasing products, services, or simply making your content more dynamic.