YouTube JS API seek

docs/.vitepress/theme/components/Video.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <div :class="$style.container">
-      <YouTube v-if="youtubeID" :id="youtubeID" />
+      <YouTube ref="yt" v-if="youtubeID" :id="youtubeID" />
       <video
         v-else-if="videoURL"
         controls
@@ -21,6 +21,7 @@ import YouTube from "./YouTube.vue";
 const { frontmatter } = useData<{ video?: string }>();
 const videoURL = computed(() => frontmatter.value?.video);
 const videoEl = useTemplateRef("video");
+const ytEl = useTemplateRef("yt");
 
 const youtubeID = ref("");
 
@@ -41,14 +42,15 @@ function imgClickListener(ev: PointerEvent) {
   if (!(ev.target instanceof HTMLImageElement)) return;
   const img = ev.target;
 
-  if (!videoEl.value) return;
-  const v = videoEl.value;
-
   const [, min, sec] = /^(\d+)\:(\d+)$/.exec(img.alt) || [];
   const t = min && sec ? parseInt(min) * 60 + parseInt(sec) : null;
   if (!t) return;
 
-  v.currentTime = t;
+  if (videoEl.value) {
+    videoEl.value.currentTime = t;
+  } else if (ytEl.value) {
+    ytEl.value.seekTo(t);
+  }
 }
 
 watch(videoURL, () => {
@@ -59,6 +61,7 @@ function onVideoNotFound() {
   const m = /\[(.+?)\]\.\S+$/.exec(videoURL.value || "") || [];
   youtubeID.value = m[1] || "";
 }
+onVideoNotFound();
 
 //@ts-ignore
 const { SSR } = import.meta.env;