auto-fullscreen video on landscape

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

@@ -2,6 +2,7 @@
   <div :class="$style.container">
     <iframe
       id="yt-player"
+      ref="iframe"
       :class="$style.iframe"
       width="100%"
       height="100%"
@@ -21,16 +22,17 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, useTemplateRef } from "vue";
 
 const props = defineProps<{ id: string; title?: string }>();
 
-defineExpose({ seekTo });
+defineExpose({ seekTo, requestFullscreen });
 
 const url = new URL("https://www.youtube.com/embed/" + props.id);
 url.searchParams.set("enablejsapi", "1");
 
 const player = ref();
+const iframe = useTemplateRef("iframe");
 
 onMounted(() => {
   const { YT } = window as any;
@@ -44,6 +46,12 @@ function seekTo(t: number) {
     player.value.seekTo(t, true);
   }
 }
+
+function requestFullscreen() {
+  if (iframe.value) {
+    iframe.value.requestFullscreen();
+  }
+}
 </script>
 
 <style module>