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>