I need to replace the div that contains youtube video with the previous state when the user scrolls beyond that div while playing video

Question

thank you so much for taking time to look in to this issue .

I have a page where it contains multiple videos from youtube , i want to replace that video content with the image whenever the user scrolls down beyond that div , it is working fine for one video but when there is multiple videos it is taking the image of last video for all the videos .

Here is my initial html :

<p>this is first paragraph</p>
 <div class="main-paragraph">
   <div class="video-content">
     <img src="/sites/default/files/image1.jpg" alt="">
     <button class="video-play"></button>
   </div>
 </div>
 <p>this is second paragraph</p>
 <div class="main-content">
   <div class="video-content">
     <img src="/sites/default/files/image2.jpg" alt="">
     <button class="video-play"></button>
   </div>
 </div>
   

Let's say for example if user plays the video 1 the html becomes like this :

<p>this is first paragraph</p>
<div class="main-paragraph">
  <div class="video-content">
    <iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/s6OusrTxwxA?autoplay=1&amp;start=0&amp;rel=0&amp;enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
  </div>
</div>
<p>this is second paragraph</p>
<div class="main-content">
  <div class="video-content">
    <iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/DKpkL3ZyLBo?autoplay=1&amp;start=0&amp;rel=0&amp;enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
  </div>
</div>  

So if users scroll's down while playing the video , i want replace that video with the image for that specific div similar to like this :

<p>this is first paragraph</p>
    <div class="main-paragraph">
      <div class="video-content">
   <img src="/sites/default/files/image1.jpg" alt="">
        <button class="video-play"></button>
      </div>
    </div>
    <p>this is second paragraph</p>
    <div class="main-content">
      <div class="video-content">
        <iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/DKpkL3ZyLBo?autoplay=1&amp;start=0&amp;rel=0&amp;enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
      </div>
    </div>

Here is my jquery :

$(document).ready(function() {
            $('.main-paragraph').each(function() {
                let old_html = $(this).find('.video-content').html();
                // Stop playing the video and show image when scrolled past.
                $(window).scroll(function() {
                    $('.video-content').each(function() {
                        let windowScroll = $(window).scrollTop(); // how many pixels you've scrolled
                        let containerDistance = $(this).offset().top;
                        let containerHeight = $(this).height(); // height of container in pixel
                        // If you've scrolled further than the top of the container + it's height
                        // stop the video.
                        if (windowScroll > containerDistance + containerHeight) {
                            $(this).html(old_html);
                        }
                    });
                });
            });