Xibo javascript on client

Get Help
1

I’m trying to solve an issue with javascript, but the solution is not working on the client.

Background:
We’re a language school and for every day of the year there is a phrase that we want to display and explain. This includes a little youtube video.
Every day I pull in the relevant info into a dataset. Showing the various text fields is done with dataset views.
Showing the video is turning out to be more tricky: I’ve got it in an ‘Embedded’ region and have followed some code example posted on these forums. However I can’t hardcode the youtube video ID in the javascript (ID is different every day).

To get this to work I’ve added some javascript to an ‘Embedded’ element and a ‘Dataset View’ element (same layout, different
regions). It works correctly when previewing (tested on IE11, Firefox and Chrome - Windows 10) but not on
my Windows (Win10) client.

In the embedded element I set up a function (onYoutubeVideoID) that gets called when the video ID is available:

console.log("ihb debug1");

// javascript for embedded youtube video
var player;
var youtubevideoid = window.top.ihbpotdyoutubeid;
//youtubevideoid = "zySOzxsc3WA";

if (typeof(youtubevideoid) == "undefined" || youtubevideoid === null) {
    // Get ID 
    console.log("ihb debug3");
    window.top.onYoutubeVideoID = onYoutubeVideoID;
}
else {
    console.log("ihb debug2");
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

}

function onYoutubeVideoID() {
    console.log("ihb debug4");
    youtubevideoid = window.top.ihbpotdyoutubeid;
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

function onYouTubeIframeAPIReady() {
    console.log("ihb debug5");
    player = new YT.Player('player',{
                           height: '720',
                           width: '1280',
                           videoId: youtubevideoid,
                           playerVars:{ 
                           'playlist': youtubevideoid,
                           'loop': 1,
                           'controls' : 0, 
                           'rel' : 0,
                           'fs' : 0,
                           'showinfo' : 0,
                           'cc_load_policy' : 0,
                           'iv_load_policy' : 3,
                           'modestbranding' : 1
                           },
                           events:{
                           'onReady': onPlayerReady
                           }
                           });
}
function onPlayerReady(event) {
    console.log("ihb debug6");
    event.target.playVideo();
}

function EmbedInit()
{
    // Init will be called when this page is loaded in the client.
    return;
}

The function gets called from the javascript linked to the dataset view element:

var youtubeidelement = document.getElementById(“span_1_1”);
var youtubeidval = youtubeidelement.innerText;
youtubeidelement.style.display = “none”;
console.log("ihb debug5 " + youtubeidval );
window.top.ihbpotdyoutubeid = youtubeidval;
window.top.onYoutubeVideoID();

If I uncomment:
//youtubevideoid = “zySOzxsc3WA”;
everything works fine on the client.

Any tips or suggestions welcome.

Marcel
International House Bristol