Changing the kWidget Background Color

Community Forums Kaltura Players and Player Plugins
1

So I’m embedding video using the dynamic embed so our users can add ambient videos to the background of their web pages. The issue we are currently having is that the iFrame loads before the video and the body tag has a css background-color of #000000 set, and this leaves the end user staring at a black screen for around 2 seconds. We have a placeholder image loaded behind the iframe, but users only see it in mobile when we remove the video.

What I would like is a way to set the css background-color to ‘none’ via flash vars or params so our placeholder image shows until the video starts and appears as if the video was just frozen on the first frame.

Is there a way to do this? It looks like there was for previous embed methods but is now deprecated and will not work with the method we are using.

See: http://climatesmart.ucdavis.edu/

2

Hi,
Though it might be possible to set the background to a transparent color using custom CSS, a much easier option would be to set the opacity of the player container DIV to 0 and add to your embed code something like this:

'readyCallback': function(playerId){
	document.getElementById(playerId).style.opacity = 1;
}

Amir

3

Unfortunately the element I need to target is the body tag inside the iframe, and this method doesn’t seem to allow me to target elements within the iframe. I’ve found documents on how to get the internals of the iframe, make changes and re-render it, but this seems to fall under the heading of cross site scripting.

4

Oh, I think I get what you’re getting at, just wait till the video loads to show it at all, that might work.

5

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

6

Might have some luck with custom skin, I found this in the settings script, and might try to set my own.

"skinResources":[{"type":"css","src":"http:\/\/cdnapi.kaltura.com\/html5\/html5lib\/v2.38.3\/skins\/kdark\/css\/layout.css"},{"type":"css","src":"http:\/\/cdnapi.kaltura.com\/html5\/html5lib\/v2.38.3\/skins\/kdark\/css\/icons.css"}]
7

I think the original solution should work better. You just need to wait until the video starts to play before showing the player. The Kaltura player events should be used, in this case the “playing” event which triggers as soon as the video starts to play. So your code should be:

<script src="http://cdnapi.kaltura.com/p/1770401/sp/177040100/embedIframeJs/uiconf_id/24976531/partner_id/1770401"></script>
<div id="kaltura_player_1481608844" style="width: 700px; height: 395px; opacity: 0"></div>
<script>
kWidget.embed({
  "targetId": "kaltura_player_1481608844",
  "wid": "_1770401",
  "uiconf_id": 24976531,
  "readyCallback": function(playerId){
    var kdp = document.getElementById(playerId);
    kdp.kBind( "playing", function(){ 
        document.getElementById(playerId).style.opacity = 1;
    });
  },
  "flashvars": {
    "autoPlay": "true",
    "controlBarContainer":{
        "plugin": false
    },
     "loadingSpinner":{
        "plugin": false
    }
  },
  "cache_st": 1481608844,
  "entry_id": "0_u50zngll"
});
</script>
8

@amir_chervinsky1 YOU ROCK! Thank you for all your help finding a viable solution to my issue. I appreciate your time and expertise.

9

Glad I could help!
One last fix - we better use:

kdp.kBind( "playing", function(){ 
        this.style.opacity = 1;
    });

No need to select the player DIV a second time…

10

Good call, gotta have standards.