После долгих поисков мы включили на нашем сайте автозапуск с голосовой прокруткой, но возникла проблема

После долгих поисков мы запустили автовоспроизведение со звуком на нашем веб-сайте, но существует проблема: всякий раз, когда видео попадает в область просмотра, оно запускается автоматически, но когда в область просмотра появляется другое видео, указанное выше видео должно останавливаться. Оба видео воспроизводятся одновременно, пока оба остаются в области просмотра.

Это мой код:

HTML:

<video 
id = "video--<?php echo $wo['media']['storyId'];?>" 
class = "plyrr-<?php echo $wo['media']['storyId'].$rand ; ?> <?php echo($wo['rvad_con']); ?> video-container" 
playsinline preload = "metadata" 
poster = "<?php  echo $wo['media']['video_thumb'];?>" 
data-setup = "{}" data-post-video = "<?php echo $wo['media']['storyId'];?>"
>

JavaScript (JQuery):

$(window).scroll(function(e)
{
    if (!document.pictureInPictureElement) 
    {
        $('.plyrr-<?php echo $wo['media']['storyId'].$rand ; ?>').each(function()
        {
            if ($(this).is(":in-viewport")) 
            { jQuery(this).get(0).play(); } 
            else 
            { $(this)[0].pause();  }
        });
    }
});

Проблема:
Он не работает так, как Instagram или Facebook, где одновременно воспроизводится только одно видео.

Можно ли настроить размер области просмотра (или что-то в этом роде), если два видео находятся внутри области просмотра одновременно? Как остановить первое видео и воспроизвести второе (последнее видео в области просмотра после прокрутки вверх или вниз)?

• пример изображения проблемы. Оба видео воспроизводятся одновременно

• Пожалуйста, проверьте мой пример HTML-страницы по адресу: https://pintrafeed.com/directory