Background Colors Wrong + YouTube Not Playing

Time and Date are correct on the player

Player Version: 1.7.3


I have created a new layout and have three elements that work exactly as intended on the admin preview but not when viewing in the ‘Display’ on the client.

The three regions that are not displaying correctly are the text region, clock, and embedded (where YouTube is scripted). The first two (text + clock) are displaying black backgrounds on the client instead of being transparent and blue, respectively.

The third, the YouTube embed, has been scripted per the script here: Autoplay Embedded Youtube Videos | Xibo Digital Signage. It plays correctly in the admin preview but the client does not autoplay and if I’m able to click on it there is a playback error with just an ID, no error number.

Thank you for any help and guidance you can provide. I’ve included a screenshot to provide some guidance.


Here’s what the backgrounds should look like, this is from the preview mode on the admin side.

The opaque background should be transparent.

Hello and welcome to the Community!

1.7.3 is a very old player version and so we would recommend that you upgrade the player to either 1.8.14, R258 or R301 and see if the same Layout has the same issue.

If the issue still persists, make sure that your Windows machine is up to date with the latest updates AND drivers for the hardware and then you could try this alternative script for the embedded Youtube videos and please do confirm if the issue persists:

      var tag = document.createElement('script');
  tag.src = "";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  var playerState = -1;
  var readyCalled = false;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      suggestedQuality: 'hd1080',
      height: '1080',
      width: '1920',
      videoId: 'YvgucHg8B2k',
      events: {
        'onReady': onPlayerReady,
        'onError': onError,
        'onStateChange': onPlayerStateChange
  function onPlayerReady(event) {
    readyCalled = true;;
  function onError(event) {
  function onPlayerStateChange(event) {
     console.log('Player Status: ' +;
     if (readyCalled && playerState === 3 && === -1) {
        console.log('Buffering failed, restarting');
        setTimeout(function() { player.playVideo(); }, 1000);
     playerState =;

Thank you Natasha. I tried the new script but still no good. I’m going to see if I can figure out who can upgrade it for us.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.