YouTube videos in a SiteOrigin slider

[Glitchy1981]

We are starting to add our YouTube videos to our product descriptions. We tried it on this page:

https://www.1st-line.com/buy/lelit-bianca-dual-boiler-pid-espresso-machine/

We use SiteOrigin and their Layout Slider to build and embedded it. Originally when you changed the slide, the previous video would still be playing in the background. I contacted SiteOrigin and they were able to make a fix for this. Then I checked the PageSpeed on it, and it looks like it loads a script for every video. It's so bad, I don't think it registers on PageSpeed.

I looked for an alternative and found the Vumbnail solution. I tested it out on this page:

https://www.1st-line.com/buy/vbm-asportn1tamon/

I have 1 video and then just duplicated it to see if the video would stop. Unfortunately it doesn't. I asked if SiteOrigin could make a fix for this and they said they couldn't.

I was wondering if there was something I could add to the 2nd one where the video can somehow pause when someone moves to the next slide.

Or does anyone have a good example of how to show multiple videos in a slider like the 1st one?

[ThatGuySam]

Hey @Glitchy1981,

Sorry for only responding to this now.

Are you still having this issue?

[Glitchy1981]

Hi thanks for responding. Technically I am still having this issue.

So currently the page below has the issue:
https://www.1st-line.com/buy/vbm-asportn1tamon/

On this page near the very bottom, I used SiteOrigin to make a video section slider for multiple videos. Currently I just duplicated the 1st video for testing purposes. When you play the video and switch to the next slide, the first video is still playing in the back.

Originally it did the same thing even if I embedded the Youtube video, but SiteOrigin was able to put a fix for that. They couldn't make a fix for custom code.

Is there something I could add to the 2nd slide (or potentially future slides) where the video can somehow pause when someone moves to the next slide.

[ThatGuySam]

This is a bit out of the scope of the Embed Builder, but you could try hooking into some kind of on-slide event or argument in Layout Slider and triggering a Video reset function when a new slide is navigated to:

function resetAllVideos () {
    // Collect all the iframes that are immediate children of a .custom-html-widget element
    const slideIframes = Array.from( document.querySelectorAll( '.custom-html-widget > iframe' ) )
    for ( slideIframe of slideIframes ) {
        // Save the src URL we start out with
        const initialSrc = String( slideIframe.src )
        // Clear out the src to stop the video from playing
        slideIframe.src = ''
        // Load the src back in to load the video again as it was when it first loaded
        slideIframe.src = initialSrc
    }
    
}

// Will probably hook into some kind of event listener or method. I'm not sure how Layout Slider actually works
$layoutSlider.addEventListener( 'newSlide', resetAllVideos )
$layoutSlider.onNextSlide( resetAllVideos )