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