Detecting a element's position when and absolute is inside a relative

Question

Please don't kill me as I'm sure this has been asked somewhere before but when I've looked around nothing made sense to me.

Essentially I'm trying to use the code below to auto play a video on my site when a user scrolls down to view it - http://jsfiddle.net/pjoxqf80/1/

var videos = document.getElementsByTagName("video"),
fraction = 0.8;
function checkScroll() {

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

        var video = videos[i];

        var x = video.offsetLeft, 
            y = video.offsetTop, 
            w = video.offsetWidth, 
            h = video.offsetHeight, 
            r = x + w, //right
            b = y + h, //bottom
            visibleX, 
            visibleY, 
            visible;

            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) {
                video.play();
            } else {
                video.pause();
            }

    }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);

However, on my page it the video.js player seems to make the videos into 'absolute' positioning so all the videos only play when the user is scrolled at the top of the page, then they pause as the user scrolls down to see them. I would like the code to detect the position of the videos correctly.

I've wanted to remove the 'absolute' positing but I'm using the CDN version of video.js CSS file so I can't change that. I think I've read about jquery .offset but not sure how to use it?

Here is the site, scroll down to find the videos:

http://www.digital-soul.com.au/tcsite/our-journal-is-different/

score 0 · Answer 1 · edited May 23 '17 at 12:13

After alot of searching I finally found the answer -

How to pause html5 video when out of view code (non-statically positioned)

The code should work like this to detect the video correctly-

var videos = document.getElementsByTagName("video"),
fraction = 0.8;
function checkScroll() {

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

        var video = videos[i];

          var x = 0,
              y = 0,
              w = video.offsetWidth,
              h = video.offsetHeight,
              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 + w;
            b = y + h;

        //var x = video.offsetLeft, 
        //    y = video.offsetTop, 
        //    w = video.offsetWidth, 
        //    h = video.offsetHeight, 
        //   r = x + w, //right
        //    b = y + h, //bottom
        //    visibleX, 
        //    visibleY, 
        //    visible;

            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) {
                video.play();
            } else {
                video.pause();
            }

    }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);

Detecting a element's position when and absolute is inside a relative

1 Answers1