fix(playback-rate-menu-button): ensure proper menu behavior on double…

… click

When the playback rate button is clicked twice, the menu does not close. This
has an impact when a developer has disabled menu display on mouse-over, forcing
the user to click elsewhere to close the menu.

- moves the `label` inside the button
- deletes function `createEl`

src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js

@@ -25,36 +25,21 @@ class PlaybackRateMenuButton extends MenuButton {
   constructor(player, options) {
     super(player, options);
 
-    this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
-
-    this.updateVisibility();
-    this.updateLabel();
-
-    this.on(player, 'loadstart', (e) => this.updateVisibility(e));
-    this.on(player, 'ratechange', (e) => this.updateLabel(e));
-    this.on(player, 'playbackrateschange', (e) => this.handlePlaybackRateschange(e));
-  }
-
-  /**
-   * Create the `Component`'s DOM element
-   *
-   * @return {Element}
-   *         The element that was created.
-   */
-  createEl() {
-    const el = super.createEl();
-
     this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;
-
     this.labelEl_ = Dom.createEl('div', {
       className: 'vjs-playback-rate-value',
       id: this.labelElId_,
       textContent: '1x'
     });
+    this.menuButton_.el_.appendChild(this.labelEl_);
+    this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
 
-    el.appendChild(this.labelEl_);
+    this.updateVisibility();
+    this.updateLabel();
 
-    return el;
+    this.on(player, 'loadstart', (e) => this.updateVisibility(e));
+    this.on(player, 'ratechange', (e) => this.updateLabel(e));
+    this.on(player, 'playbackrateschange', (e) => this.handlePlaybackRateschange(e));
   }
 
   dispose() {