Hidden sprout videos, embbeded in a iframe in a slick slider wont play

Question

I want my iframe to be draggable(left/right) inside a slick slider, to achieve this I have created an overlay div(iframe-overlay), and using the SproutVideo Javascript Player API, I have bind an event, to play the sprout video when the overlay div is click.

In my slick slider I have set the "slidesToShow" to 3, all of these first 3 iframes will play the video when I click on it, my problem is when i slide to the fourth and nth slide, sproutvideo javascript player api, will not work anymore.

What is weird is, the bind event still gets called. How do i solved this, any help would be greatly appreciated. Below are my code.

HTML

<div class="parents-saying template-row row-margin-top">
    <div class="container">
        <div class="slider-grandparent-container element-margin-top">
            <div class="slider-parent-container">
                <div class="slider">
                    <?php foreach ($parents_saying['videos'] as $videos):?>
                        <slide>
                            <div class="iframe-container" style="position:relative;height:0;padding-bottom:177.94253938832253%">
                                <iframe class="sproutvideo-player thirteenth-row-iframe" src="https://videos.sproutvideo.com/embed/<?=$videos['sprout_id'];?>"?playerTheme=dark&amp;playerColor=2f3437 style="position:absolute;width:100%;height:100%;left:0;top:0;border-radius:8px;" frameborder="0" allowfullscreen referrerpolicy="no-referrer-when-downgrade">
                                </iframe> 
                                <div class="iframe-overlay" id="<?=$videos['sprout_id'];?>"></div>
                            </div>
                        </slide>
                    <?php endforeach;?>
                </div>
    </div>
</div>

JS

  $('.parents-saying .slider').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
    dots: true,
    infinite: true,
    variableWidth: true,
    prevArrow:
      "<img class='a-left slider-arrow slick-prev' src='/wp-content/uploads/2023/08/home-left-arrow.webp'>",
    nextArrow:
      "<img class='a-right slider-arrow slick-next' src='/wp-content/uploads/2023/08/home-right-arrow.webp'>",
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          arrows: false,
        }
      },
    ],
  });
  $('.parents-saying .iframe-overlay').bind('click', function(e){
    const sproutId = $(this).attr('id');  
    console.log('SPROUT ID: ', sproutId);
    const player   = new SV.Player({videoId: sproutId});
    player.play();
  });

Below is a screenshot of the slick slider

Answer 1

@luna In my opinion, the issue maybe occurred when Slick Slider clones elements when the variableWidth set to ture or slidesToShow >= 1.

So, I tried to attach the click event to the .slider-parent-container.

Here is the modified JS code:

$('.parents-saying .slider').slick({
  // Your existing settings...
});

// Use event delegation to handle clicks on .iframe-overlay
$('.parents-saying .slider-parent-container').on('click', '.iframe-overlay', function(e) {
  const sproutId = $(this).attr('id');  
  console.log('SPROUT ID: ', sproutId);
  const player = new SV.Player({ videoId: sproutId });
  player.play();
});

Answer 2

@luna I think, the issue may be happened because the iframes in the 4th and nth slide might not be initialized properly. This SproutVideo player needs to be initialized for each iframe.

To solve this issue, I use the Slick slider's afterChange event to detect when the slide changes and then initialize the SproutVideo player for the current slide.

This is code I tried:

$('.parents-saying .slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: true,
  dots: true,
  infinite: true,
  variableWidth: true,
  prevArrow:
    "<img class='a-left slider-arrow slick-prev' src='/wp-content/uploads/2023/08/home-left-arrow.webp'>",
  nextArrow:
    "<img class='a-right slider-arrow slick-next' src='/wp-content/uploads/2023/08/home-right-arrow.webp'>",
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        arrows: false,
      }
    },
  ],
  // Add the following event handler to initialize SproutVideo player on slide change
  afterChange: function (slick, currentSlide) {
    const sproutId = $('.slick-current .iframe-overlay').attr('id');
    const player = new SV.Player({ videoId: sproutId });
    // Optionally, you may want to pause the player when changing slides
    // player.pause();
  }
});

$('.parents-saying .iframe-overlay').bind('click', function (e) {
  const sproutId = $(this).attr('id');
  console.log('SPROUT ID: ', sproutId);
  const player = new SV.Player({ videoId: sproutId });
  player.play();
});

Hope to be helpful for your understanding.