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
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>