Viewport - jQuery selector for finding items in a viewport

Question

In my project, each div has a video, so I'm trying to check if the div is in the viewport, so if it is a video to start playing, and if it does not pause or stop. I am jusing jekyll. For example, my html code for just one div looks like this:

 <div class="container">
            <div class="row">
            <input type="button" id="play" value="Play"></input>
            <input type="button" id="pause" value="Pause"></input>
            <br/><br/>
                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                    <hr class="section-heading-spacer">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Vjetersia</h2>
                    <div class="lead"><p class="justify"> Vjetersia</p></div>
                </div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                  <div class="gifv-player" id="">
                    <video preload="none" loop="loop">
                        <source type="video/webm" src="all_files/1.webm" />
                    </video>
                    <img src="example.png" alt="Animated Gif" />
                </div>
                </div>
                <div class="col-lg-3 col-sm-pull-2  col-sm-2"></div>
            </div>
        </div>

I tried to do this with the click of a button and it works:

$( document ).ready(function() {
        player = new GifvPlayer();
        $("#play").click(function() {
            $('.gifv-player').find('video').show();
            $('.gifv-player').find('video')[0].play();
        });
        $("#pause").click(function() {
            $('.gifv-player').find('video')[0].pause();
        });
    });

but how can I change it so that it can work on a walk if the div is visible to start playing my video? Any help?

Answer 1

You can link to this demo.

.growme {
    background-color: #990000;
    height: 0;
    width: 0;
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;

}

DEMO HERE

Answer 2

, . play/pause, div... http://jsfiddle.net/7mkdj4ak/1/

var scrollPosition = $(window).scrollTop();
var windowViewHeight = $(window).height();
var videoWrapHeight = $('.container').outerHeight();

$(window).on('scroll', function(){
    scrollPosition = $(window).scrollTop();
    playVideos(scrollPosition);
});

$(window).on('resize', function(){
    windowViewHeight = $(window).height();
});


var playVideos = function(scrollPosition) {
    $('.container').each(function(i){
        var thisContainerTopPosition = $(this).offset().top;
        var thisContainerBottomPosition = thisContainerTopPosition + videoWrapHeight;
        if( 
            thisContainerTopPosition >= scrollPosition && 
            thisContainerBottomPosition <= (scrollPosition + windowViewHeight ) 
        ) {
            /* div is in view PLaY */
            $(this).css('background-color','orange');
        } else {
            /* div is out of view PausE */
            $(this).css('background-color','#afafaf');
        }
    });
};


playVideos(scrollPosition);

    .container {
        width: 100%;
        height: 100px;
        background-color: #afafaf;
        margin: 20px 0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container">
        <h1>my Video 1</h1>
    </div>
    <div class="container">
        <h1>my Video 2</h1>
    </div>
    <div class="container">
        <h1>my Video 3</h1>
    </div>
    <div class="container">
        <h1>my Video 4</h1>
    </div>

Hide result