Version: 2.67.0

Customize UI during ad playback?

This how-to guide describes how to customize the look and feel of the player when an advertisement is playing.

Detecting ad playback

There are two general approaches to detect advertisement playback:

  1. A responsive approach using a CSS rule.
  2. A programmatic approach using (JavaScript) events.

CSS

Whenever you create a THEOplayer instance, you need to provide a DOM-element (container).

THEOplayer-initialization

var element = document.querySelector(".video-container");
var player = new THEOplayer.Player(element, playerConfig);

This container (element in the snippet above) gains the theo-ad-playing class whenever an advertisement is playing. Through CSS you could use this class to enforce certain behavior. For example, you could hide the fullscreen button if an ad is playing.

.theo-ad-playing .vjs-fullscreen-control {
display: none !important;
}

Events

The Ads API exposes the following events:

  • adbegin: dispatched when an ad starts
  • adend: dispatched when an ad ends
  • adbreakbegin: dispatched when an ad break (or ad slot) starts
  • adbreakend: dispatched when an ad break ends

The snippet below demonstrates how you could detect the start of an adbreak through a JavaScript event listener.

player.ads.addEventListener("adbreakbegin", console.log);

These events can be used to trigger a certain behavior programmatically.

Examples

Displaying an advertisement label

The snippet below demonstrates how to add a label to the control bar during ad playback using CSS.

<style>
.theo-ad-playing .theo-advert-label {
display: block !important;
}
.theo-ad-playing .vjs-fullscreen-control {
display: none !important;
}
</style>
...
<script>
var button = THEOplayer.videojs.getComponent("Button");
var myButton = THEOplayer.videojs.extend(button, {
constructor: function() {
button.apply(this, arguments);
this.el().innerHTML = "Ad";
},
handleClick: function() {
elementContainer.classList.toggle("hidden");
},
buildCSSClass: function() {
return "theo-advert-label";
}
});
THEOplayer.videojs.registerComponent("AdvertLabelButton", myButton);
player.ui.getChild("controlBar").addChild("AdvertLabelButton", {});
</script>

Adding a custom countdown

The snippet below demonstrates how to add a countdown timer using primarily JavaScript.

<style>
.theo-ad-countdown {
position: absolute;
top: 50%;
left: 50%;
font-size: 5em;
}
</style>
...
<script>
function updateTime() {
var countdown = document.querySelector(".theo-ad-countdown");
if (countdown) {
countdown.innerHTML = Math.round(player.duration - player.currentTime);
}
}
player.ads.addEventListener("adbegin", function(e) {
var countdown = document.createElement("div");
countdown.className = "theo-ad-countdown";
countdown.innerHTML = player.duration;
element.appendChild(countdown);
player.addEventListener("timeupdate", updateTime);
});
player.ads.addEventListener("adend", function(e) {
var countdown = document.querySelector(".theo-ad-countdown");
if (countdown) {
player.removeEventListener("timeupdate", updateTime);
element.removeChild(countdown);
}
});
</script>