My client wants a page with 4 embedded YouTube videos which pause when you click on the next one so there is only one playing at a time. Sounds easy enough, right?
The problem is, he wants to keep the whole website in Adobe muse. I've found a widget that allows me to insert jQuery/js code easily. I am using a slightly modified version of this fiddle I've found on a thread from 2014 which looked very promising and stable but somehow it doesn't work when I upload the page on my webserver. It works in the Fiddle though.
var tag = document.createElement('script');tag.src = "https://www.youtube.com/iframe_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);console.log('api_inserted');function onYouTubeIframeAPIReady() { console.log('api_ready'); var $ = jQuery; var players = []; $('iframe').filter(function() { return this.src.indexOf('http://www.youtube.com/') === 0; }).each(function(k, v) { console.log('iframes'); var src1 = $(this).attr('src'); $(this).attr('src', src1 +"?enablejsapi=1"); if (!this.id) { this.id='embeddedvideoiframe'+ k; } players.push(new YT.Player(this.id, { events: {'onStateChange': function(event) { console.log('State_changed: '+ event.data); if (event.data == YT.PlayerState.PLAYING) { $.each(players, function(k, v) { if (this.getIframe().id != event.target.getIframe().id) { this.pauseVideo(); } }); } } } })); console.log(players); });}my console output looks like this:
api_insertedapi_readyiframes[X]iframes[X, X]iframes[X, X, X]iframes[X, X, X, X]