Custom HTML on player

Custom HTML can be added to player using player JS. The injectThemeHtml() can be used to inject HTML or styles dynamically into the player.

Basic setup:

Note: Assuming the player script is already loaded, otherwise wrap this in a window.onVdoCipherApiReady() method.

// var videos = window.vdo.getObjects();
// var video = videos[videos.length - 1];

// OR

// var video = new VdoPlayer({ ... });

// listen for the theme to load
video.addEventListener(`mpmlLoad`, () => {
  video.injectThemeHtml('<p>Hello world</p>');
});

Note that the player elements as well as the HTML injected by the above scripts are all parts of your website DOM and not inside the iframe. This means that any website CSS will be applied to your injected HTML. It also means that you can reference your injected HTML with just regular DOM APIs such as getElementById

Example: Adding brand logo as a moving watermark

The player creates a relative positioned div inside the container and uses it to create multiple absolute positioned elements. We shall create styles for the watermark and position at the bottom right.

p.watermark: {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

// assuming video contains the reference to video instance
video.addEventListener(`mpmlLoad`, () => {
  video.injectThemeHtml('<p class="watermark">Hello world</p>');
});

Note that everything is in your DOM so you can basically do anything with it. Here we try to move around the watermark every 2 seconds

// get a reference to your video container
var container = document.querySelector('.embedBox');

// get reference to all watermarks
var watermarks = document.querySelectorAll('.watermark');
setTimeout(() => {
  for (var i = 0; i < watermarks.length; i++) {
    var mark = watermarks[i];
    var contWidth = container.offsetWidth;
    var contHeight = container.offsetHeight;
    mark.left = (contWidth - mark.offsetWidth) * Math.random();
    mark.top = (contHeight - mark.offsetHeight) * Math.random();
  }
}, 2000);