Style the Player

  • The Web Receiver SDK provides a built-in player UI that can be implemented by adding the cast-media-player element to the HTML body.

  • Various cast-media-player properties, such as background, splash image, and font, can be customized using CSS variables.

  • CSS variables can be added using in-line styles, a CSS stylesheet, or style.setProperty in Javascript.

  • The --playback-logo-image is the only variable set from the body selector, while all others are set from the cast-media-player selector.

  • The .splash properties override the .logo properties when the receiver is idle, allowing for different displays at launch and while idle.

The Web Receiver SDK provides a built-in player UI. To implement this UI into your custom Web Receiver app, you need to add the cast-media-player element to the body of your HTML file.

<body>
  <cast-media-player></cast-media-player>
</body>

CSS variables allow you to customize various cast-media-player properties, including the player background, splash image, font family, and more. You can add these variables with in-line CSS styles, a CSS stylesheet, or the style.setProperty in Javascript.

In the next sections, learn how to customize each area of the media player element. You can use the following templates to help you get started.

External

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/receiver.css" media="screen" />
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
</body>
<footer>
  <script src="js/receiver.js"></script>
</footer>
</html>

js/receiver.js

const context = cast.framework.CastReceiverContext.getInstance();

...

// Update style using javascript
let playerElement = document.getElementsByTagName("cast-media-player")[0];
playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

...

context.start();

css/receiver.css

body {
  --playback-logo-image: url('http://some/image.png');
}
cast-media-player {
  --theme-hue: 100;
  --progress-color: rgb(0, 255, 0);
  --splash-image: url('http://some/image.png');
  --splash-size: cover;
}
Inline
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <style>
    body {
      --playback-logo-image: url('http://some/image.png');
    }
    cast-media-player {
      --theme-hue: 100;
      --progress-color: rgb(0, 255, 0);
      --splash-image: url('http://some/image.png');
    }
  </style>
  <script>
    const context = cast.framework.CastReceiverContext.getInstance();

    ...

    // Update style using javascript
    let playerElement = document.getElementsByTagName("cast-media-player")[0];
    playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

    ...

    context.start();
  </script>
</body>
</html>

The playback logo displays in the upper-left corner of your receiver while media plays. This property is separate from the .logo class. You can customize the --playback-logo-image from the body selector.

body {
  --playback-logo-image: url('image.png'); /* set from the body selector */
}

Player background properties

--background variables set the background properties of the entire player, visible during launch and playback. For example, you could set the entire background to a white and silver linear gradient:

cast-media-player {
  --background-image: linear-gradient(white, silver);
}

Web Receiver display:

Custom background

You can use the following variables to customize .background properties:

Variables and defaults

Name Default Value Description
--background black CSS background property
--background-color CSS background-color property
--background-image CSS background-image property
--background-repeat no-repeat CSS background-repeat property
--background-size cover CSS background-size property

CSS template

cast-media-player {
  --background:
  --background-color:
  --background-image:
  --background-repeat:
  --background-size:
}

Logo properties

The .logo class is positioned in front of the .background class, and spans the entire player. This class displays when your receiver is launching. If you don't provide any .splash variables, the .logo class also displays when your receiver is in an idle state.

The following example sets the --logo-image to an equalizer icon named welcome.png. An image defaults to the center of your receiver:

cast-media-player {
  --logo-image: url('welcome.png');
}

Web Receiver display:

Custom logo

You can use the following variables to customize .logo properties:

Variables and defaults

Name Default Value Description
--logo-background CSS background property
--logo-color CSS background-color property
--logo-image CSS background-image property
--logo-repeat no-repeat CSS background-repeat property
--logo-size CSS background-size property

CSS template

cast-media-player {
  --logo-background:
  --logo-color:
  --logo-image:
  --logo-repeat:
  --logo-size:
}

Splash properties

Similar to the .logo class, the .splash class spans the entire player. If you set these properties, your .splash variables will override the .logo variables when your receiver is idle. This means that you could use one set of .logo properties at launch, and display separate backgrounds or images when your receiver is idle.

For example, you could override the white and silver gradient background with dimgray, and add an animated waiting... icon:

cast-media-player {
  --splash-color: dimgray;
  --splash-image: url('waiting.png');
}

Web Receiver display:

Custom splash

If you don't set these properties, your receiver defaults to your .logo settings or app name when it's idle.

You can use the following variables to customize .splash properties:

Variables and defaults

Name Default Value Description
--splash-background CSS background property
--splash-color CSS background-color property
--splash-image CSS background-image property
--splash-repeat CSS background-repeat property
--splash-size CSS background-size property

CSS template

cast-media-player {
  --splash-background:
  --splash-color:
  --splash-image:
  --splash-repeat:
  --splash-size:
}

Slideshow

To have up to 10 images cycle through during idle state (in place of the splash image), use the following slideshow parameters.

Variables and defaults

Name Default Value Description
--slideshow-interval-duration 10s Time between images.
--slideshow-animation-duration 2s Duration of transition.
--slideshow-image-1 First image in slideshow.
--slideshow-image-2 Second image in slideshow.
--slideshow-image-3 Third image in slideshow.
--slideshow-image-4