Demo THEOplayer

Custom centered controlbar

This demo shows how you can create a custom centered controlbar. After pressing "play" you will see a big play / pause button in the middle of the video.


You can add other custom buttons to this controlbar.


This demo can be implemented as follows:

JavaScript code

// Create player and setup source
var containerElement = document.querySelector('.player');
var player = new THEOplayer.Player(containerElement, {libraryLocation : ''});
player.source = {
    sources: '//'

// THEOplayer videojs object
var videojs = THEOplayer.videojs;

// Create center controlbar
var ControlBar = videojs.getComponent('ControlBar');
var CustomCenterControlBar = videojs.extend(ControlBar, {
    constructor: function (player, options) {
        options.children = [];, player, options);
videojs.registerComponent('CustomCenterControlBar', CustomCenterControlBar);

var customCenterControlBar = player.ui.addChild('CustomCenterControlBar');

// Create custom big play pause button
var PlayToggle = videojs.getComponent('playToggle');
var CustomBigPlayToggle = videojs.extend(PlayToggle, {
    constructor: function(player, options) {, player, options);
videojs.registerComponent('CustomBigPlayToggle', CustomBigPlayToggle);

// Add custom big play pause toggle to center controlbar


CSS code

.theoplayer-skin .vjs-control-bar.custom-center-controlbar {
    top: 50%;
    transform: translate(0, -50%);
    font-size: 3em;
    height: 3em;
    justify-content: center;
    visibility: hidden;

.theoplayer-skin .vjs-control-bar.custom-center-controlbar .theo-control-bar-shadow {
    display: none;

.theoplayer-skin .vjs-control-bar.custom-center-controlbar .theo-button-tooltip {
    top: 3.3em;
    bottom: auto;

.theoplayer-skin .vjs-control-bar.custom-center-controlbar .vjs-button {
    visibility: visible;
    margin: 0 0.5em;

.theoplayer-skin.vjs-user-inactive.vjs-playing .vjs-control-bar .vjs-button {
    pointer-events: none;


Still wasting time debugging video playback problems?

Welcome to cutting-edge video, delivered efficiently and on any platform. We think you're going to like it.

Request A Demo