Customization

Please note that as of November 1st, 2022 IBM has discontinued support for the Watson Media Player SDK. It will not receive updates or technical support and may not fully function. For SDKs you have already downloaded, please do not use them to build applications and delete them from your archives. You may find information for alternative methods to create customized viewer experiences with our APIs on our Developer Tools pages. Users may also continue to access Watson Media through the web, both at video.ibm.com and through Embedded modules.

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.

Our reference implementation does not include all the possible customization options. Find the list of available variables here.

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

Edit this page on GitHub

Player SDK for Google Cast: Configuration

Getting started