第一次上传

2026-06-11 10:31:24 +08:00
commit cfef094568
1523 changed files with 210650 additions and 0 deletions
@@ -0,0 +1,41 @@
+<template>
+  <div :class="['overflow-hidden rounded-lg', aspectRatioClass, className]">
+    <iframe
+      :src="`https://www.youtube.com/embed/${videoId}`"
+      :title="title"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+      class="w-full h-full"
+    ></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type AspectRatio = '16:9' | '4:3' | '21:9' | '1:1'
+
+interface Props {
+  videoId: string
+  aspectRatio?: AspectRatio
+  title?: string
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  aspectRatio: '16:9',
+  title: 'YouTube video',
+  className: '',
+})
+
+const aspectRatioClass = computed(() => {
+  const aspectRatioClasses = {
+    '16:9': 'aspect-video',
+    '4:3': 'aspect-4/3',
+    '21:9': 'aspect-21/9',
+    '1:1': 'aspect-square',
+  }
+  return aspectRatioClasses[props.aspectRatio]
+})
+</script>