Skip to main content

PrivacyPlayer Overlays

Overlays#

An overlay is something you place on top of the video. Things like a station logo (bug), or a set of buttons or contextual information.

Prerequisites#

Enable a station logo#

The station logo can be enabled with just one function player.enableStationLogo(image, width_percentage, opacity).

Only the image parameter is required. Others are optional, defaults are width_percentage 25 and opacity 1.

player.enableStationLogo('logo.svg', 20, 1)

If you want to remove it, you can call the player.disableStationLogo() function. It does not take any arguments.

player.disableStationLogo()

Adding an overlay#

Because the overlay logic is on your website, we can use all the javascript magic we want. You can add an HTML element to the video, and it will be relative to the video. So all is relative to the exact size of the video on the screen. The function to call is: player.addOverlay(overlay).

let overlay = false // To save a reference to this element to be able to remove it later
function addOverlay() {
overlay = document.createElement("div")
overlay.style.cssText = "position: absolute; height: 25%; bottom: 15px; left: 15px; right: 15px; padding: 15px; border-radius: 5px; background-color: rgba(255, 255, 255, .5); transition: opacity 500ms;"
overlay.innerHTML = "<a href=\"#\" class=\"btn btn-sm btn-success\">Buy magic bullet</a>"
player.addOverlay(overlay)
}

And remove it again with the overlay.remove() function. This is the reason you had to save the reference.

function removeOverlay() {
if (overlay) {
overlay.remove()
}
}