Pause and play video when in viewport

Question

I was experimenting with play and pause when a video is within the viewport... when I was searching around I found the following code.. which unfortunately didn\'t work:

Answer 1

I agree with what you said in your question: users might not like it, especially if they're on mobile and you're sucking all their data plan. Anyway, here's how to check if an element is in the viewport: http://jsfiddle.net/pwhjk232/

$(document).ready(function() {
    var inner = $(".inner");
    var elementPosTop = inner.position().top;
    var viewportHeight = $(window).height();
    $(window).on('scroll', function() {
        var scrollPos = $(window).scrollTop();
        var elementFromTop = elementPosTop - scrollPos;

        if (elementFromTop > 0 && elementFromTop < elementPosTop + viewportHeight) {
            inner.addClass("active");
        } else {
            inner.removeClass("active");
        }
    });
})

Instead of using addClass you could use .get(0).play() and .get(0).pause() as suggested by Vohuman