youtube and PDF frame

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>