Add videos to Wordpress with autoplay and stop on scroll

Question

I need to insert in my Wordpress page a video uploaded in Media Library. This video has to autoplay when is in browser view and has to stop on user scroll.

I tried to use tag with autoplay function and it's ok. Then I have add to my js folder (in theme folder) a file with some Javascript code in order to add stop on scroll function. I suspect that the code I have tried if fine only with YouTube link.

This is the code I have tried

//play when video is visible
var videos = document.getElementsByTagName("iframe"), fraction = 0.8;

function checkScroll() {

  for(var i = 0; i < videos.length; i++) {
    var video = videos[i];

    var x = 0,
        y = 0,
        w = video.width,
        h = video.height,
        r, //right
        b, //bottom 
        visibleX, visibleY, visible,
        parent;


    parent = video;
    while (parent && parent !== document.body) {
      x += parent.offsetLeft;
      y += parent.offsetTop;
      parent = parent.offsetParent;
    }

    r = x + parseInt(w);
    b = y + parseInt(h);


    visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
    visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));


    visible = visibleX * visibleY / (w * h);


    if (visible > fraction) {
      playVideo();
    } else {
      pauseVideo();

    }
  }

};


var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
};

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    window.addEventListener('scroll', checkScroll, false);
    window.addEventListener('resize', checkScroll, false);

    //check at least once so you don't have to wait for scrolling for the    video to start
    window.addEventListener('load', checkScroll, false);
};


function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      //console.log("event played");
    } else {
      //console.log("event paused");
    }
};

function stopVideo() {
    player.stopVideo();
};

function playVideo() {
  player.playVideo();
};

function pauseVideo() {
  player.pauseVideo();
};

Using a Youtube link the script pause video on scroll but don't autoplay. I expect both autoplay and pause on scroll using a video from my Wordpress media library

score 0 · Answer 1 · answered Jun 29 '21 at 13:51

var autoPlayVideo = document.getElementById("ocScreencapVideo");
    autoPlayVideo.oncanplaythrough = function() {
        autoPlayVideo.muted = true;
        autoPlayVideo.play();
        autoPlayVideo.pause();
        autoPlayVideo.play();
    }

<video id="ocScreencapVideo" autoplay="autoplay" muted="muted" loop="loop" playsinline="playsinline" preload="metadata" data-aos="fade-up">
  <source src="https://www.youtube.com/watch?v=W6NZfCO5SIk">
    Your browser does not support MP4 Format videos or HTML5 Video.
</video>

sachin chatterjee · Answer 2 · 2022-10-31T16:12:42.800

Add this custom script to your wordpress. You can use plugins like Simple Custom CSS and JS for adding custom snippets.

Here the function checkVisible is taken from another answer here.

jQuery(document).ready(function ($) {

    //To check if element is visible
    function checkVisible(elm) {
        var rect = elm.getBoundingClientRect();
        var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
        return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
    }
    
    //To play-pause self-hosted videos in elementor only when it's visible
    $(window).scroll(function () {
        $(".elementor-video").each(function (i, obj) {
            if (checkVisible(obj)) {
                obj.play();
            } else
                obj.pause();
        });
    });
});

score -1 · Answer 3 · answered Oct 31 '19 at 12:26

Rather than using a custom script, you can go with this [plugin][1] provided by Wordpress library to save time and efforts.

Another solution is to use this javascript for autoplay video:

https://codepen.io/bloodcrow777/pen/QBVKKy

var autoPlayVideo = document.getElementById("ocScreencapVideo");
    autoPlayVideo.oncanplaythrough = function() {
        autoPlayVideo.muted = true;
        autoPlayVideo.play();
        autoPlayVideo.pause();
        autoPlayVideo.play();
    }

<video id="ocScreencapVideo" autoplay="autoplay" muted="muted" loop="loop" playsinline="playsinline" preload="metadata" data-aos="fade-up">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"
          type="video/mp4">
    Your browser does not support MP4 Format videos or HTML5 Video.
</video>

I can't see Wordpress plugin you link – Stefano Ferrario Oct 31 '19 at 13:53 — Stefano Ferrario, Oct 31 '19 at 13:53
Javascript you posted didn't pause the video on user scroll – Stefano Ferrario Oct 31 '19 at 19:15 — Stefano Ferrario, Oct 31 '19 at 19:15

Add videos to Wordpress with autoplay and stop on scroll

3 Answers3