YouTube Video API (iFrame) trying to reinitialize with more than 1 youtube video on page. Adobe Analytics

Here is the snippet I am using that was provided to me:

/*Video Code Block 1 of 2: Append Enable JS API Parameter and Unique Video ID for Video Tracking.*/
var n=0;

jQuery('iframe').each(function() {
 
 var src = jQuery(this).attr('src');
 
if(src){
    if (src.indexOf('youtube.com') > -1) {
     
        if (src.indexOf('?') > -1) {
            if (src.indexOf('enablejsapi') == -1) {
                src = src + '&enablejsapi=1';
            }
        } else {
            src = src + '?enablejsapi=1';
        }

        jQuery(this).attr('src',src);
        jQuery(this).attr('id','player' +n);
        n++
    }       
 }     

});

/*Video Code Block 2 of 2: Add event listener and fire _satellite.track rules. */ 

try {var addYoutubeEventListener = (function() {

    var callbacks = [];
    var iframeId = 0;

    return function (iframe, callback) {

        // init message listener that will receive messages from youtube iframes

        if(iframeId === 0) {
            window.addEventListener("message", function (e) {

                if(e.origin !== "https://www.youtube.com" || e.data === undefined) return;
                try {
                    var data = JSON.parse(e.data);
                    if(data.event !== 'onStateChange') return;

                    var callback = callbacks[data.id];
                    callback(data);
                }
                catch(e) {}
            });
        }

        // store callback
        iframeId++;
        callbacks[iframeId] = callback;
        var currentFrameId = iframeId;

        // sendMessage to frame to start receiving messages
        iframe.addEventListener("load", function () {
            var message = JSON.stringify({
                event: 'listening',
                id: currentFrameId,
                channel: 'channelnameofyourchoice'
            });

            iframe.contentWindow.postMessage(message, 'https://www.youtube.com');

            message = JSON.stringify({
                event: "command",
                func: "addEventListener",
                args: ["onStateChange"],
                id: currentFrameId,
                channel: "channelnameofyourchoice"
            });
            iframe.contentWindow.postMessage(message, 'https://www.youtube.com');
        });
    }
})();

addYoutubeEventListener(document.getElementById("player0"), function(e) {
    console.log(e)
    switch(e.info) {
        case 1:
            _satellite.track("video_start");
            break;
        case 0:
            _satellite.track("video_end");
            break;
        case 2:
            _satellite.track("video_pause");
    }
});}

catch(err) {console.log("Video Tracking Not Present");}

My thing is, when I play the first video, YT.PlayerState.PLAYING sets to 1, when I pause the video and open another video, YT.PlayerState.PLAYING still remains at 1 so therefore, I cannot trigger my success event to fire.

Note: I cannot use the extension adobe has built in because that extension completely makes all of my videos disappear from the page so i'm going with the method mentioned above.

Trying to find a way to reinitialize it so when a new video opens up, all the parameters reset and I can trigger my success events

0

There are 0 best solutions below