In advance, my apologies for my bad english.

I'm using WordPress with Elementor. I wan't to have an autoplay on my video only when it is in viewport.

I've tried this code :

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

});

It's works BUT ONLY if the user has already click on play.
How to improve this ?

In advance, thanks.

CodePudding user response：

do you have video set to muted? Browsers doesn't allowed autoplay for video when is not muted.

CodePudding user response：

Well i will prefer keeping it simple. Below I have mentioned the complete process and will be adding the image as well to make it simple for you. This is from a st courier tracking website which is displaying tracking results and showing it to the customers so whenever the customer comes the video is auto played . How are they doing it.

If you are using elementor then simply

1. Go to the page
2. Edit with Elementor
3. Open Navigator
4. Click on Video (The one which you want autoplay on) 5.Now at the right hand side click on "Content"
5. Under the video options select or toggle on Autoplay

Hopefully it helps.

Elementor navigator Toogle on option