Skip to main contentIBM Video Streaming Developers


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


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.


<!-- Load your own font -->
<link href="" rel="stylesheet">


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.


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');