logo

How to change the Context Menu?

This question is typically asked by developers who want to change the logo in the context menu, change the default text or add some items.

The snippet below does exactly that.

function customizeContextMenu(container) {
  var contextMenu = container.querySelector(".theo-context-menu");

  // change context menu text
  var contextMenuFirstItem = contextMenu.querySelector(".theo-context-version");
  contextMenuFirstItem.innerText = "Brand X";

  // change mini logo
  var contextLogo = contextMenu.querySelector(".theo-0logo");
  contextLogo.style.backgroundImage =
    "url('https://image.freepik.com/free-icon/line-logo_318-102660.jpg')";
  contextLogo.style.backgroundSize = "cover";
  contextLogo.querySelector("svg").style.visibility = "hidden";

  // add a line
  var contextMenuSecondItem = document.createElement("li");
  contextMenuSecondItem.innerText = "24/07/2018";
  contextMenu.appendChild(contextMenuSecondItem);
}

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

It's important to note that customizeContextMenu is immediately called after initializing a THEOplayer instance.

Another common question is to remove the context menu altogether. The context menu can be disabled as it is one of the Add-Ons. You can manage your THEOplayer configuration via THEOportal

To verify whether this add-on is enabled you can execute the query below.

var contextMenuEnabled = THEOplayer.features.indexOf("contextmenu") > -1;
github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2020. All Rights Reserved.
Leuven
New York
San Francisco
Singapore
Barcelona