YouTube api events not firing with adobe muse

Question

My client wants a page with 4 embedded youtube videos wich 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_inserted
api_ready
iframes
[X]
iframes
[X, X]
iframes
[X, X, X]
iframes
[X, X, X, X]

score 0 · Answer 1 · answered Jun 13 '16 at 17:31

I asked a good friend of mine and we solved the problem.

The iframes needed the "enablejsapi=1" and I added it with a "?" before, that was wrong. There only has to be one "?" after the video id and all other properties are divided with a "&".

The correct code is:

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.stopVideo();
                            }
                        });
                    }
                }
            }
        }));
        console.log(players);
    });
}

YouTube api events not firing with adobe muse

1 Answers1