Title overlay on HTML5 video (à la Youtube)

[macfire]

A title overlay for html5 videos (non-Youtube) would be nice. If feature already exists, please ignore. (I couldn't find it).

My current hack solution:

ADDED NEW FUNCTION under var ui

var ui = {
...
    createTitle: function createTitle(text) {
        if (is$1.empty(text)) {
            return null;
        }
        var _title = createElement('div', {
            class: 'plyr__title_bar'
        });
        _title.appendChild(createElement('span', {
            class: 'plyr__title_bar_inner'
          }, text));
        return _title;
      },
...
}

ADDED CALL under existing var ui.setTitle
(May be better placed elsewhere)

var ui = {
...
    // Setup aria attribute for play and iframe title
    setTitle: function setTitle() {
      // Find the current text
      var label = i18n.get('play', this.config); // If there's a media title set, use that for the label
      if (is$1.string(this.config.title) && !is$1.empty(this.config.title)) {
          label += ", ".concat(this.config.title);

       /*  CALL TO NEW ui.createTitle and append to DOM */
        this.elements.container.appendChild(ui.createTitle(this.config.title));
      } // If there's a play button, set label
...
}

STYLES to position new title div and hide on play

.plyr__title_bar {
  $height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: $height;

  font-size: 18px;
  font-weight: normal;

  padding: 0 20px;
  line-height: $height;
  vertical-align: middle;

  background-color: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: block;
}

.plyr--playing {
  .plyr__title_bar {
    display: none;
  }
}

Make sure title attribute is set on init

    const player = new Plyr('#my_player', {
        title: 'My video title',
    })

[Adamanthus]

This is great but doesn't seem to hide when controls do? Any idea why?