Changing the kWidget Background Color

Hmm, tried a few things without satisfactory results. First I tried setting the opacity to 0 on the player element and giving it a transition in hopes of avoiding a jerky change in visuals. The results appeared to be that the video is transparent until the ready callback happens, then there is a quick fade in, but the video is still black, so it would appear that the readyCallback is firing before the video is truly ready.

Demo Link: http://video-ucd-csa.pantheonsite.io/

<div id="kaltura-player<?php print $variables['pane']->pid; ?>" class="home-header-video" style="opacity: 0; transition: opacity 1s;"></div>
<script>
  kWidget.embed({
    'targetId': 'kaltura-player<?php print $variables['pane']->pid; ?>',
    'wid': '------------',
    'uiconf_id': '------------',
    'entry_id': '<?php if(isset($ambient_id)){print $ambient_id;} ?>',
    'flashvars': {
      'autoPlay': true,
      'autoMute': true,
      'loop': true,
      'controlBarContainer.plugin': false,
      'largePlayBtn.plugin': false,
      'loadingSpinner.plugin': false,
      'disableOnScreenClick': true,
      'forceMobileHTML5': true,
      'KalturaSupport.LeadWithHTML5': true
    },
    'params': {
      'wmode': 'transparent'
    },
    'readyCallback': function(playerId){
      document.getElementById(playerId).style.opacity = 1;
    }
  });
</script>

To try to get around this I thought I would be sneaky and work in a timeout so the ready callback would fire and then the opacity change would wait another X seconds, and fade in, but this doesn't seem to be working either.

'readyCallback': function(playerId){
              var setOpacity = document.getElementById(playerId).style.opacity = 1;
              var timeOut = 3000;
              setTimeout(setOpacity, timeOut);
            }

This actually isn't that bad if the default image would just load a little quicker.

Demo: http://video-ucd-csa.pantheonsite.io/content/adapting-climate