ā–¼
Streaming live at 10am (PST)

Modules with Videos - Code so Closing a Module will ALSO stop the video?


#1

Hi Guys,

This was a design for a client who like the module UX.

I'm just now realizing that when you close a module, the videos continue to play, because the interactions simply 'Display None'...

Major problem

Any idea of how to stop the video when the module is closed?

Thanks,
Will

Public Share Link: https://preview.webflow.com/preview/tim-1?preview=14028c1d9bad90156e4c20669f3b942c


#2

Take a look at


#3

After looking around, using the Youtube API seemed to be the best solution:

<script>
  
  $(function(){

				var yt_int, yt_players={},
				    initYT = function() {
				        $(".ytplayer").each(function() {
				            yt_players[this.id] = new YT.Player(this.id);
				        });
				    };

				$.getScript("//www.youtube.com/player_api", function() {
				    yt_int = setInterval(function(){
				        if(typeof YT === "object"){
				            initYT();
				            clearInterval(yt_int);
				        }
				    },500);
				});

				$('.pause').on('click', function(){
					yt_players['player1'].pauseVideo();
				});
    
    			$('.pause2').on('click', function(){
					yt_players['player2'].pauseVideo();
				});
        
    			$('.pause3').on('click', function(){
					yt_players['player3'].pauseVideo();
				});
        
    			$('.pause4').on('click', function(){
					yt_players['player4'].pauseVideo();
				});
        
    			$('.pause5').on('click', function(){
					yt_players['player5'].pauseVideo();
				});
        
    			$('.pause6').on('click', function(){
					yt_players['player6'].pauseVideo();
				});
        
    			$('.pause7').on('click', function(){
					yt_players['player7'].pauseVideo();
				});
        
    			$('.pause8').on('click', function(){
					yt_players['player8'].pauseVideo();
				});
        
    			$('.pause9').on('click', function(){
					yt_players['player9'].pauseVideo();
				});
        
    			$('.pause10').on('click', function(){
					yt_players['player10'].pauseVideo();
				});
        
    			$('.pause11').on('click', function(){
					yt_players['player11'].pauseVideo();
				});


			});
  
</script>