In this video, we dive deep into the world of Elementor and GSAP ScrollTrigger to show you How To Play Videos on Scroll effortlessly! 🔥 Whether you’re a web designer, developer, or just a curious newbie, this step-by-step tutorial walks you through mastering scroll-based video interaction. 🚀 We’ll cover everything you need to know, from installation to implementation, plus tips and tricks to elevate your designs. Don’t forget to like, subscribe, and hit that notification bell for more cutting-edge web design tips!

Here you have to add this script: 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>

Elementor Pro GPL – Click Here

Elementor Pro Original – Click Here