Skip to main contentIBM Video Streaming Developers

Customization

The sample app provided is a reference implementation of the Google Cast Styled Media Receiver. Apply your brand colors, use your logo, or add your custom typeface by following the examples below. Feel free to delete or modify any of the variables in the receiver.css file.

Use your brand colors

css/receiver.css

cast-media-player {
/* Change background */
--background-color: #000;
/* Change hue used by the player */
--theme-hue: 220;
/* Change the color of the progress bar */
--progress-color: hsl(220, 100%, 50%);
}

Use your own font

Load your custom font in the receiver.html file and update the --font-family variable to get customized titles and metadata.

receiver.html

<html>
<head>
<!-- Load your own font -->
<link href="https://fonts.googleapis.com/css2?family=YOUR_FONT" rel="stylesheet">

css/receiver.css

cast-media-player {
/* Use your own font family and apply fallbacks */
--font-family: 'YOUR_FONT', 'Open Sans', sans-serif;
}

Add your own assets under the static folder and specify them in css/receiver.css.

css/receiver.css

cast-media-player {
/* Spash image settings */
--splash-background: url('./static/images/wm.gif');
--splash-image: url('./static/images/wm.gif');
--splash-size: 200px;
--splash-repeat: no-repeat;
--splash-color: transparent;
/* Logo settings */

Use your icons

Similarly to the splash screen image and logo, you can change icons by adding them to the static folder and linking them in css/receiver.css.

cast-media-player {
/* The image to be displayed while paused. */
--pause-image: url('./static/svg/pause.svg');
/* The image to be displayed while playing */
--play-image: url('./static/svg/play.svg');
/* The image to be displayed while launching */
--spinner-image: url('./static/svg/loading.svg');
/* The image to be displayed while buffering */
--buffering-image: url('./static/svg/loading.svg');