YouTube JS API seek

docs/.vitepress/theme/components/YouTube.vue

@@ -1,10 +1,11 @@
 <template>
   <div :class="$style.container">
     <iframe
+      id="yt-player"
       :class="$style.iframe"
       width="100%"
       height="100%"
-      :src="'https://www.youtube.com/embed/' + $props.id"
+      :src="url.href"
       frameborder="0"
       allow="
         accelerometer;
@@ -20,7 +21,29 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string; title?: string }>();
+import { onMounted, ref } from "vue";
+
+const props = defineProps<{ id: string; title?: string }>();
+
+defineExpose({ seekTo });
+
+const url = new URL("https://www.youtube.com/embed/" + props.id);
+url.searchParams.set("enablejsapi", "1");
+
+const player = ref();
+
+onMounted(() => {
+  const { YT } = window as any;
+  if (YT?.Player) {
+    player.value = new YT.Player("yt-player");
+  }
+});
+
+function seekTo(t: number) {
+  if (player.value) {
+    player.value.seekTo(t, true);
+  }
+}
 </script>
 
 <style module>