How can I remove or change the watermark of the Bitmovin Player UI?

Our Player and its Bitmovin Player UI Framework, enable you to fully adjust their look&feel to your needs. Bitmovin Player version 7 and higher use CSS only to define their style, therefore its default rules can be easily overridden to achieve your own desired look&feel. That includes the watermark, which is shown in the upper right corner of the UI by default. This FAQ describes how you can

• Hide the watermark,
• Edit the URL of the watermark it points to when clicked,
• Use a custom image as watermark, and
• How you can hide it on Chromecast too.

The following CSS classes used below are all described in our Player UI CSS Class Reference.

Hiding the Watermark

Hiding the logo is as easy as setting display: none on the CSS class bmpui-ui-watermark:

.bmpui-ui-watermark {
  display: none;
}

For Bitmovin Player version 6 and below, this is simply done by the screenLogoImage attribute within the skin section of the player configuration. A possible configuration might look like the following:

var conf = {
    key: 'YOUR-KEY-HERE',
    source: {
        dash: '//path/to/manifest.mpd',
        hls: '//path/to/playlist.m3u8',
        poster: '//path/to/poster.jpg'
    },
    style: {
        width: '100%',
        aspectratio: '16:9',
        controls: true
    },
    skin: {
        screenLogoImage: ""
    }
};

Editing the Watermark Link URL

The watermark HTML element is a button with a data attribute called url. This determines where the link points to. It is therefore possible to use Javascript to change this link, and CSS to use a different image, or do both in javascript.

Disabling the link

//Sets the HTML attribute "disabled" for the <button> so the link is no longer clickable  
document.querySelector("button.bmpui-ui-watermark").setAttribute("disabled", "disabled")

Using a custom URL

//Changes the URL the watermark links to  
document.querySelector("button.bmpui-ui-watermark").dataset.url = "<https://example.com>"

Using a custom image

The CSS attribute backgroundImage is used to provide the image for the logo. Simply override with your own URL to show your custom image instead, by defining a custom CSS rule:

.bmpui-ui-watermark {  
  background-image: url("https://path/of/your/image.png");  
} 

Or, by using JavaScript:

document.querySelector("button.bmpui-ui-watermark").style.backgroundImage = "url("https://path/of/your/image.png")"

Hiding the Watermark on Chromecast

Please refer to our tutorial.