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
-const { SSR } = import.meta.env;
+function onOrientationChanged() {
+  if (window.screen.orientation.type.startsWith("landscape")) {
+    if (videoEl.value) {
+      videoEl.value.requestFullscreen();
+      return;
+    } else if (ytEl.value) {
+      ytEl.value.requestFullscreen();
+      return;
+    }
+  }
 
-if (!SSR) {
-  setTimeout(() => setImgClick(), 500);
+  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>