0

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

EBFLO
  • 1
  • Myabe it's because you're refferin only to `player0`? - see this line in your code: `addYoutubeEventListener(document.getElementById("player0")` - it would be nice if you use [jsfiddle](https://jsfiddle.net/) or any other online code editor to test your code. Please see **how to create a [mcve]**. – Mauricio Arias Olave May 23 '23 at 14:47
  • Hi @MauricioAriasOlave thanks for your reply, i thought the same as well but what if they share the same ID? There's a page with 7 items (youtube videos), when a user clicks one of the items to play, a modal/lightbox pops up with the iframe youtube embed code, they have the same id "player0" and I user the youtube API, the first video is the only one that gets picked up for the start, end and pause. when i close the modal/lightbox and select another video w/ the same id "player0" it doesn't capture the youtube start,end,pause. – EBFLO May 24 '23 at 13:31

0 Answers0