Adding Title Overlay to Video.js player - video.js

Question

I am new to Video.js, but like what I see so far. One thing I have not seen: How to add a title to the top of the player, which will disappear on play, and reappear on pause.
I can see how to tie an action to these events, and I have read about adding elements to the player. For instance (this example is only halfway done):
var myContainer = videoObj.addChild('button');
myContainer.addClass("myContainer");
which I got from: https://github.com/videojs/video.js/blob/master/docs/api/vjs.Component.md
that snippet adds this code:
<div class="vjs-control myContainer" role="button" aria-live="polite" tabindex="0" style="display: block;">
<div class="vjs-control-content">
<span class="vjs-control-text">Need Text</span>
</div>
</div>
But what I want is a simple DIV that will have a title, with code like this:
<div class="myOverlay">
<h2>Title of Video</h2>
</div>
Am I barking up the wrong tree here? Is there a better way to get what I want done?
Thanks in advance,
Bill

Answer 1

Have you tried this videojs plugin?
https://github.com/brightcove/videojs-overlay
You can choose to show the overlay on certain events like start, playing or end of the video.
player = videojs('/path/to/video', options, function() {});
overlay_content = '<div class="myOverlay"><h2>Title of Video</h2></div>';
player.overlay({
overlays: [{
start: 'loadstart',
content: overlay_content,
end: 'playing',
align: 'top'
}, {
start: 'pause',
content: overlay_content,
end: 'playing',
align: 'top'
}]
});