Video control during infinite scroll

I'm an beginner who is starting to develop with django.

It consists of a web page similar to Facebook or Instagram and all the contents are videos.

Currently, we have configured the infinity scroll, and jquery has played the video on the screen and stopped the invisible video.

We also configured the script with onclick so that when you click on the video, you can only mute it and play it again.

There was a problem here.

Videos that are not visible on the <!> screen should stop playing, but videos that are unmuted cannot be played without being visible on the screen.

here is my code

    <div class="container text-center infinite-container">


    {% for video in video_list %}
    <div class="card text-center mt-5 infinite-item">

      <div> {{video.author }}
        {% if request.session.user == 'gkuer' %}

        <button class="btn btn-info" onclick="location.href = '{% url 'video:video_delete' video.pk %}'">삭제</button>

        {% else %}
        video{{ video.id }}
        {{ video.pk }}
        {{ video.self.pk }}
        {{ video.self.id }}

        dd
        {% endif %}
      </div>
      <div class="card-header bg-transparent">
        <div class="row">
          <a class="nav-link navbar-brand  text-muted mr-0" href="#">
            <h4>{{video.restaurant}}</h4>
          </a>
          <a class="nav-link navbar-brand  text-muted ml-0 mt-1" href="#"><small>{{video.distance}}km</small></a>

          <a class="nav-link  navbar-brand  text-muted ml-auto" href="#">{{video.author}}</a>
          </li>
        </div>

        <div class="row">
          <a class="nav-link navbar-brand  text-muted mr-0" href="#">{{video.foodname}}</a>
          <a class="nav-link navbar-brand  text-muted ml-0 mt-1" href="#"><small>{{video.price | intcomma}}원</small></a>

          <a class="nav-link navbar-brand  ml-auto text-muted" href="#">{{video.get_status_display }}</a>
        </div>

      </div>


      <div class="card-body" style="padding:0;">
        <video id='video{{video.id}}' class="video center align-middle" controls="true" autoplay muted loop playsinline
          style='max-width: 100%; max-height: 700px;' onclick="unmute('video{{video.id}}')">
          <source src="{{ video.file.url }}" type="video/mp4">
          </source>

          Your browser does not support the video tag.
        </video>


        <script>
          function unmute(self) {
            var $video = $('#video{{video.id}}');
            const player = document.getElementById(self);

            if (player.muted) {
              player.muted = false;

            }
            else {
              player.muted = true;

            }
            if (player.pause()) {
              $video[0].play();
            }
          }
          
          $(function () {

            var $video = $('#video{{video.id}}');
            var $window = $(window);

            $window.scroll(function () {

              var $topOfVideo = $video.offset().top;
              var $bottomOfVideo = $video.offset().top + $video.outerHeight();

              var $topOfScreen = $window.scrollTop();
              var $bottomOfScreen = $window.scrollTop() + $window.innerHeight();

              if (($bottomOfScreen > $bottomOfVideo) && ($topOfScreen < $topOfVideo)) {
                $video[0].play();
              } else {
                $video[0].pause();
              }

            });

          });
        </script>


      </div>
    </div>

    {% endfor %}

  </div>

  <div class="loading" style="display: none;">
    Loading...
  </div>

  {% if page_obj.has_next %}
  <a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
  {% endif %}

  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],

      onBeforePageLoad: function () {
        $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
      }
    });
  </script>