video fullscreen on orientation change to landscape

docs/.vitepress/config.mts

@@ -9,6 +9,15 @@ export default defineConfig({
   title: "ko-grammar",
   description: "Korean grammar edited",
   lang: "ko-KR",
+  head: [
+    [
+      "script",
+      {
+        async: "async",
+        src: "https://www.youtube.com/iframe_api",
+      },
+    ],
+  ],
   themeConfig: {
     socialLinks: [
       { icon: "github", link: "https://git.polv.cc/polv/ko-grammar" },

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

@@ -1,13 +1,11 @@
 <template>
   <div :class="$style.container">
     <iframe
+      ref="iframe"
       :class="$style.iframe"
       width="100%"
       height="100%"
-      :src="
-        `https://www.youtube.com/embed/${$props.id || 'videoseries'}` +
-        ($props.list ? `?list=${$props.list}` : '')
-      "
+      :src="url.href"
       :title="$props.title"
       frameborder="0"
       allow="
@@ -28,11 +26,56 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
+
+const props = defineProps<{
   id?: string;
   list?: string;
   title?: string;
 }>();
+
+const url = new URL(
+  `https://www.youtube.com/embed/${props.id || "videoseries"}`,
+);
+url.searchParams.set("enablejsapi", "1");
+if (props.list) {
+  url.searchParams.set("list", props.list);
+}
+
+const iframe = useTemplateRef("iframe");
+const player = ref();
+
+function onOrientationChanged() {
+  if (player.value && iframe.value) {
+    if (
+      window.screen.orientation.type.startsWith("landscape") &&
+      player.value.getPlayerState() === 1
+    ) {
+      iframe.value.requestFullscreen();
+      return;
+    }
+  }
+
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  }
+}
+
+onMounted(() => {
+  const { YT } = window as any;
+  if (YT?.Player && iframe.value) {
+    player.value = new YT.Player(iframe.value);
+  }
+
+  window.screen.orientation.addEventListener("change", onOrientationChanged);
+});
+
+onBeforeUnmount(() => {
+  window.screen.orientation.removeEventListener("change", onOrientationChanged);
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  }
+});
 </script>
 
 <style module>