[1111]

Здравствуйте.
Есть такой код

<section class="features">
    <h2 class="features__title">Особенности</h2>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="1.mp4" type="video/mp4">
    </video>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="2.mp4" type="video/mp4">
    </video>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="3.mp4" type="video/mp4">
    </video>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="4.mp4" type="video/mp4">
    </video>
</section>

И скрип который автозапускает видео когда оно в окне просмотра

<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>
<script>
// Play Video
$(function() {
  var $video = $('video');
  var $window = $(window);

  $window.scroll(function() {
    if ($video.is(":in-viewport")) {
      $video[0].play();
    } else {
      $video[0].pause();
    }
  });
});
</script>

Проблема в том что, запускается лишь первое видео, я как понимаю это связано с ноликом в $video[0], т.е. выбирается тег video который первый на странице(нулевой). Я совершенно не знаю JS, и не понимаю как изменить чтобы работало со всеми элементами на странице.
Помогите пожалуйста.
Спасибо