chore: add auto timestamp diff detection at live video (#21936)

Author: alexdln

docs/.vitepress/theme/live/Layout.vue

@@ -14,7 +14,7 @@ import Footer from '@components/oss/Footer.vue'
       <Timer at="2026-03-19T15:00:00.000Z" />
     </template>
     <template #timeout>
-      <VideoIframe />
+      <VideoIframe at="2026-03-19T15:00:00.000Z" />
     </template>
   </TimeoutSwitcher>
   <Events />

docs/.vitepress/theme/live/VideoIframe.vue

@@ -1,10 +1,39 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  at: {
+    type: String,
+    required: true,
+  },
+})
+
+const iframeSrc = computed(() => {
+  const totalLength = 39 * 60 + 15 // 39 minutes and 15 seconds
+  const atTime = new Date(props.at).getTime()
+  const now = Date.now()
+  const elapsedSeconds = Math.max(0, Math.floor((now - atTime) / 1000))
+
+  const params = new URLSearchParams({
+    si: 'hhgR4fwkRw9zQ0yx',
+    controls: '0',
+    start: elapsedSeconds > totalLength ? 0 : String(elapsedSeconds),
+    disablekb: '1',
+    rel: '0',
+    autoplay: '1',
+  })
+
+  return `https://www.youtube-nocookie.com/embed/bmWQqAKLgT4?${params.toString()}`
+})
+</script>
+
 <template>
   <div class="wrapper wrapper--ticks w-full border-nickel border-t md:divide-x">
     <iframe
       width="560"
       height="315"
       class="w-full h-auto max-h-[calc(100vh-5rem-var(--vp-banner-height,0px))] aspect-video"
-      src="https://www.youtube-nocookie.com/embed/bmWQqAKLgT4?si=hhgR4fwkRw9zQ0yx&amp;controls=0&amp;start=0&amp;disablekb=1&amp;rel=0&amp;autoplay=1"
+      :src="iframeSrc"
       title="YouTube video player"
       frameborder="0"
       allow="