unsupported pseudo: in-viewport

Question

I'm following this guide to detect when my video element comes in viewport then do "x", but keep getting the title error. Not sure if because Im using wordpress with gulp and piling.js

My page uses Piling and I have a video section, when I scroll to that "stack", I want the video to start play but it starts to play on page load.

// inside document.ready()

 $('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
}) 

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: in-viewport

<div id='<ID-CHANGES-INSIDE-LOOP>' class='image-block'>
  <video autoplay>
    <source class='video' src='movie.mp4' type='video/mp4'>
  </video>
</div>

Is using Piling making this difficult to work?

Answer 1

You should be using pagePiling.js callbacks or state classes.

Answer 2

the pseudo property :in-viewport needs to be attached by a plugin (which I cannot find anymore) -

maybe try the try the OnScreen Basic Visibility Detection instead; it does about the same.

Answer 3

That pseudo selector needs its plugin to work (it's not part of jQuery selectors), but nowadays you can easily check if an element is in the viewport using .getBoundingClientRect(). Here's the method I use:

/**
 * Check if an element is in the visible viewport
 * @param {jQuery|HTMLElement} el
 * @return boolean
 */
var IsInViewport = function(el) {
    if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

// example
if( IsInViewport($('#myvideo')) ) { /* do stuff.. */ }

Also, depending on your needs, you could use :visible selector (https://api.jquery.com/visible-selector/).