Автоматическая остановка видео в кадре при невидимости (прокрутка)

Question

У меня есть код iframe gfycat. Как сделать так, чтобы видео останавливалось, когда оно не отображается (прокрутка)?

My html:

<div class="giphy_div" id="giphy_div2681209" style="height:444px">
<iframe src="https://gfycat.com/ifr/MaleSoftAmphibian" frameborder="0" scrolling="no" allowfullscreen="" width="95%" height="430"></iframe>
</div>

Javascript:

function checkVisible( elm, eval ) {
    eval = eval || "visible";
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();
        //ifr=$(elm).children().attr('src');
       //  console.log(ifr);

       var giph_div_id=$(elm).attr("id");

        console.log(giph_div_id);


    if( ((y < (vpH + st)) && (y > (st - elementHeight))) ){
       console.log('visible');

        var giphy_url=$(elm).html();
        var ifr="";
         if(giphy_url.includes("iframe") || giphy_url.includes("img src")){


        }else{

 $(elm).html("<iframe src='"+giphy_url+"' frameborder='0' scrolling='no' allowfullscreen width='95%' height='430'></iframe>");

        }    
       //console.log(giphy_url);
    } else{

       var giphy_url=$(elm).html();
      if(giphy_url.includes("iframe")){
           ifr=$(elm).children().attr('src');
            $(elm).html(ifr); 

      }

    } 

    if (eval == "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
    if (eval == "above") return ((y < (vpH + st)));



}


$(window).scroll(function() {

$('.giphy_div').each(function(i, obj) {
      checkVisible(obj);
});

});


$(window).load(function() {

$('.giphy_div').each(function(i, obj) {
      checkVisible(obj);
});

});

где вина? JavaScript код отображает ошибку Uncaught TypeError: $ не является функцией $ (окно) .scroll (function () {

Но на других сайтах этот код работает хорошо,

Я новичок