0

I currently trying to reuse the variable the that our tealium utag.js creates.

We use tealium for tracking various things on our webpage, and I just noticed that some of the stuff it tracks, makes me unable to create controllers for my embedded youtube videos, as the utag.js includes these, as stated (here)[https://community.tealiumiq.com/t5/iQ-Tag-Management/Tracking-Video-with-Tealium-iQ/ta-p/15049]

// Tealium Tracking Code for YouTube iframe embeds
//
// Read the identifiers on the YouTube iframes. If not present, then add ids
if (jQuery('iframe[src*="youtube.com"]').length > 0) {
 var i = 0, id;
 window.iframe_id = [];
 jQuery('iframe[src*="youtube.com"]').each(function() {
   if (jQuery(this).attr('id')) {
     id = jQuery(this).attr('id');
     window.iframe_id.push(id);
   } else {
     id = 'tealium_youtube' + i;
     jQuery(this).attr('id', id);
     window.iframe_id.push(id);
     i++;
   }
 });
}

// Configure Milestones
//
function setMileStones(i) {
  // Set the intervals here as you want them reported, in % viewed, each number separated by a comma
  // If you do not want mileStones set mileStones[i] = [] ;
  mileStones[i] = [10, 25, 50, 75, 90];
}
var mileStones = [];
for (i = 0; i < window.iframe_id.length; i++) {
  setMileStones(i);
}

// Load the YouTube iframe library
//
var ytapi = document.createElement('script');
ytapi.src="https://ww" + "w.youtube" + ".com/iframe_api";
var scriptref = document.getElementsByTagName('script')[0];
scriptref.parentNode.insertBefore(ytapi, scriptref);

window.players = [];
window.onYouTubeIframeAPIReady = function() {
  // Confirm existing ID or set ID in the iframe for each video on the page
  jQuery('iframe[src*="youtube.com"]').each(function() {
  var id = jQuery(this).attr('id');
  window.players[id] = new YT.Player(id, {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
      }
    });
  });
};

This utag.js script is already included in the html as a header, so why can't i from the console use window.players[jQuery(this).attr('id')].playVideo() to start an video? It says that it doesn't know the the player, it is undefined? which is odd as this script is parts of heads, and thus the variable should be "globally?" available?

anita
  • 193
  • 10
  • Where are you using this line: `window.players[jQuery(this).attr('id')].playVideo()`? can you add some examples of the div that telium creates for set the YouTube iframe API? Without more details, I only can imagine you're (or sending the wrong id) or `window.players` has invalid or no data... – Mauricio Arias Olave Jan 21 '19 at 22:37
  • basically... utag.js which contain this is included in the ``, and this is a js file so my div elements in there – anita Jan 22 '19 at 04:45
  • the line is used in the console window of browsers... was trying to cal play snd stop video – anita Jan 22 '19 at 04:48
  • what is `this` in the context of your code? if run in the browser console, `jQuery(this)` will evaluate to the `window` object whereas in the code above, it will be the ID of your `IFrame` element. - did you try just using one of the IDs directly? e.g. `window.players[].playVideo()` – geckojk Jan 22 '19 at 10:39
  • @anita maybe I'm requesting too much, but, can you use jsfiddle or the code-snippet proveder here in Stack Overflow for [create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve)? – Mauricio Arias Olave Jan 22 '19 at 13:33

0 Answers0