How do I stop the slider when a embedded item is clicked on the slider

Publishing help General
1

I have a slider on my webpage which has an embedded video. When the user clicks play on the video, the slide still advances after X seconds. What I want to have happen is if the user clicks play on the video for the slide not to advance. Currently the only workaround is to click on the slider navigation to bring me back to the first slide/keep me on the first slide before/after play is clicked on the embedded video. How do I accomplish this.

2

Do you have a Public Share Link?

3

https://preview.webflow.com/preview/zulafly?preview=3204f67368b19ee4eef262a4ed66ba2b

4

Hm when I preview the site and click the video to play, the slider does not rotate its slides.

5

Thank you for your response - correct the side advances (rotates, slides, moves) to the next slide on the timed interval even though the play button on the video was clicked. What I want to have happen is that if the user clicks play, the slide with the video stays and doesn’t slide/move on to the next slide at the timed interval.

If the slide is clicked (outside of the embedded area) or the navigation of the slides is clicked, the auto advance (timed interval) is interrupted (stays on the slide) as expected, but when the play button is clicked it doesn’t interrupt the slide show from auto-advancing. I need the slide to stay put if the video play button is clicked.

6

Sorry I misread your response - you are saying when play is clicked that the slide is not advance. Could you let me know what browser you are using. The slide is advancing for me after play is clicked (at the timed interval) in Chrome and IE (11).

7

I’m thinking maybe you clicked on the slide navigation to bring it back to slide 1 and then hit the play button. Since you clicked on the navigation, it would stop the auto slide. To do the test, refresh the page and click play before the slide advances (and only play), you will notice after 8 seconds from page load, the slide advances even after play is pressed on the slide.

8

This sort of custom functionality is not supported by the Webflow slider. You will need to custom code the entire slider.

9

Thats a horrible answer - custom code the entire slider?!? :slight_smile: I was thinking I could maybe use javascript to click the slider nav when the div that holds the video is clicked. I’ll report back if that works.

10

Actually yeah that might be correct.

Meanwhile, there is a code snippets, that looks for an event with that embedded yt video, but i do not know a command or jquery to insert that stops the autoplay animation of the slider … so its useless unless someone knows how to stop the slider with jquery :stuck_out_tongue_winking_eye:

<script src="https://www.youtube.com/iframe_api"></script>
<div id="video"></div>

<script>
    var player, playing = false;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('video', {
            height: '360',
            width: '640',
            videoId: 'c_L9HAl5Z64',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerStateChange(event) {
        if(!playing){
//* Here needs the code to be placed that stops the slider *//            
            playing = true;
        }
    }
</script>
11

Thank you - yep, I came across the same code. As you stated, not having any luck getting anything clicked to stop the slider. I was also looking into javascript stop command and clearqueue, but no luck.

12

Overall, I bailed on this and just have a placeholder image with the YouTube play button on it. When clicked, a new page is opened that autoplays the video.

1 Like
13

This topic was automatically closed after 60 days. New replies are no longer allowed.