Adding buttons and text to the default UI

// information on setting up THEOplayer and the player object can be found at https://support.theoplayer.com/hc/en-us/articles/115001933305

var element, player;

window.onload = function () {
    var elementContainer = document.querySelector('.theoplayer-overlay-element-container');
    
    // setting up the player
    element = document.querySelector('#video-container');
    player = new THEOplayer.Player(element, {
        libraryLocation : 'http://cdn.theoplayer.com/dash/theoplayer/',
        ui: {
            fluid: true
        }
    });
    
    // settings the source
    player.source = {
        sources: [{
            src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny_metadata.m3u8',
             type : 'application/x-mpegurl',
        }]
    };
    
    // setting up the custom icon by setting up a video-js component
    var Button = THEOplayer.videojs.getComponent('Button');
    var MyButton = THEOplayer.videojs.extend(Button, {
      constructor: function() {
        Button.apply(this, arguments); // required
        
        /* Extra after initializing your button */
        
        // add tooltip
        var tooltipSpan = document.createElement('span');
        tooltipSpan.className = 'theo-button-tooltip vjs-hidden';
        tooltipSpan.innerText = 'Info';
        function toggleTooltip() {
            tooltipSpan.classList.toggle('vjs-hidden');
        }
        this.el().addEventListener('mouseover', toggleTooltip);
        this.el().addEventListener('mouseout', toggleTooltip);
        this.el().appendChild(tooltipSpan);
        
      },
      handleClick: function() {
        elementContainer.classList.toggle('hidden');
      },
      buildCSSClass: function () {
        return 'fa fa-info custom-info-icon vjs-control vjs-button'; // insert all class names here
      }
    });

    THEOplayer.videojs.registerComponent('MyButton', MyButton);
    player.ui.getChild('controlBar').addChild('myButton', {});
    
    // setting up the close button
    var closeBtn = document.createElement('div');
    closeBtn.classList.add('close-btn');
    closeBtn.textContent = 'X';
    closeBtn.addEventListener('mousedown', function () {
        elementContainer.classList.toggle('hidden');
    });
    elementContainer.appendChild(closeBtn);
}
// code

 .hidden {
        display: none;
    }
    
    .custom-info-icon {
        cursor: pointer;
    }
    
    .theoplayer-overlay-element-container {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 30px;
        background-color: rgba(21, 21, 21, 0.85);
        z-index: 11;
    }
    
    .overlay-item {
        width: 33.33%;
        float: left;
        position: relative;
        padding-bottom: 40px;
    }
    
    .close-btn {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 1.5em;
        color: white;
        z-index: 12;
        cursor: pointer;
        font-weight: bold;
    }
    
    /*
        hidden by default
    */
    
    .custom-title {
        display: none;
    }
    
    /*
        unless player has started
    */
    
    .theoplayer-skin.vjs-has-started .custom-title {
        display: block;
        position: absolute;
        top: 10px;
        left: 10px;
    }