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.
Updated 10 months ago