auto-fullscreen video on landscape

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

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { useData } from "vitepress";
-import { computed, ref, useTemplateRef, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from "vue";
 import YouTube from "./YouTube.vue";
 
 const { frontmatter } = useData<{ video?: string }>();
@@ -62,12 +62,35 @@ function onVideoNotFound() {
   youtubeID.value = m[1] || "";
 }
 
-//@ts-ignore
+function onOrientationChanged() {
-const { SSR } = import.meta.env;
+  if (window.screen.orientation.type.startsWith("landscape")) {
-
+    if (videoEl.value) {
-if (!SSR) {
+      videoEl.value.requestFullscreen();
-  setTimeout(() => setImgClick(), 500);
+      return;
+    } else if (ytEl.value) {
+      ytEl.value.requestFullscreen();
+      return;
     }
+  }
+
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => setImgClick(), 500);
+
+  if (window.screen?.orientation) {
+    window.screen.orientation.addEventListener("change", onOrientationChanged);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (window.screen?.orientation) {
+    window.screen.orientation.removeEventListener("change", onOrientationChanged);
+  }
+});
 </script>
 
 <style module>

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>