add playback rate control button

app/assets/stylesheets/components/video.css

@@ -4,4 +4,9 @@
     --vlite-controlsOpacity: 0.7;
     --vlite-controlBarBackground: linear-gradient(0deg, #000 -50%, #fff);
   }
+
+  .v-playbackRateSelect.v-controlButton {
+    color: var(--vlite-controlsColor);
+    text-align: center;
+  }
 }

app/javascript/controllers/video_player_controller.js

@@ -8,13 +8,42 @@ Vlitejs.registerProvider('youtube', VlitejsYoutube)
 export default class extends Controller {
   static values = { poster: String, src: String, provider: String }
   static targets = ['player']
+  playbackRateOptions = [1, 1.25, 1.5, 1.75, 2]
 
   connect () {
     this.player = new Vlitejs(this.playerTarget, {
       provider: this.hasProviderValue ? this.providerValue : 'youtube',
       options: {
-        poster: this.posterValue
-      }
+        poster: this.posterValue,
+        controls: true
+      },
+      onReady: this.handlePlayerReady.bind(this)
     })
   }
+
+  handlePlayerReady (player) {
+    const controlBar = player.elements.container.querySelector('.v-controlBar')
+    if (controlBar) {
+      const volumeButton = player.elements.container.querySelector('.v-volumeButton')
+      const playbackRateSelect = this.createPlaybackRateSelect(this.playbackRateOptions, player)
+      volumeButton.parentNode.insertBefore(playbackRateSelect, volumeButton.nextSibling)
+    }
+  }
+
+  createPlaybackRateSelect (options, player) {
+    const playbackRateSelect = document.createElement('select')
+    playbackRateSelect.className = 'v-playbackRateSelect v-controlButton'
+    options.forEach(rate => {
+      const option = document.createElement('option')
+      option.value = rate
+      option.textContent = rate + 'x'
+      playbackRateSelect.appendChild(option)
+    })
+
+    playbackRateSelect.addEventListener('change', () => {
+      player.instance.setPlaybackRate(parseFloat(playbackRateSelect.value))
+    })
+
+    return playbackRateSelect
+  }
 }