add video to mobile via YouTube

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

@@ -1,17 +1,29 @@
 <template>
   <Teleport to="body">
-    <video v-if="videoURL" controls :src="videoURL" ref="video">Hello</video>
+    <div :class="$style.container">
+      <YouTube v-if="youtubeID" :id="youtubeID" />
+      <video
+        v-else-if="videoURL"
+        controls
+        :src="videoURL"
+        ref="video"
+        @error="onVideoNotFound"
+      />
+    </div>
   </Teleport>
 </template>
 
 <script setup lang="ts">
 import { useData } from "vitepress";
-import { computed, useTemplateRef, watch } from "vue";
+import { computed, ref, useTemplateRef, watch } from "vue";
+import YouTube from "./YouTube.vue";
 
 const { frontmatter } = useData<{ video?: string }>();
 const videoURL = computed(() => frontmatter.value?.video);
 const videoEl = useTemplateRef("video");
 
+const youtubeID = ref("");
+
 function setImgClick() {
   document.removeEventListener("click", imgClickListener);
   document.addEventListener("click", imgClickListener);
@@ -43,21 +55,30 @@ watch(videoURL, () => {
   setImgClick();
 });
 
+function onVideoNotFound() {
+  const m = /\[(.+?)\]\.\S+$/.exec(videoURL.value || "") || [];
+  youtubeID.value = m[1] || "";
+}
+
 //@ts-ignore
 const { SSR } = import.meta.env;
 
-if (!SSR){
+if (!SSR) {
   setTimeout(() => setImgClick(), 500);
 }
 </script>
 
-<style scoped>
-video {
+<style module>
+.container {
   width: 400px;
   overflow: visible;
   position: fixed;
   bottom: 10px;
   left: 10px;
   z-index: 100;
+
+  > * {
+    width: 100%;
+  }
 }
 </style>

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

@@ -0,0 +1,39 @@
+<template>
+  <div :class="$style.container">
+    <iframe
+      :class="$style.iframe"
+      width="100%"
+      height="100%"
+      :src="'https://www.youtube.com/embed/' + $props.id"
+      frameborder="0"
+      allow="
+        accelerometer;
+        autoplay;
+        encrypted-media;
+        gyroscope;
+        picture-in-picture;
+        fullscreen;
+      "
+    >
+    </iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string; title?: string }>();
+</script>
+
+<style module>
+.container {
+  padding-bottom: 56.25%;
+  position: relative;
+}
+
+.iframe {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+</style>