diff --git a/layers/components/atoms/Video.vue b/layers/components/atoms/Video.vue
new file mode 100644
index 0000000..589f246
--- /dev/null
+++ b/layers/components/atoms/Video.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+interface Props {
+  src: string
+  type?: 'mp4' | 'webm'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'mp4',
+})
+</script>
+
+<template>
+  <video v-if="props.src">
+    <source :src="props.src" :type="`video/${props.type}`" v-bind="$attrs" />
+  </video>
+</template>
diff --git a/layers/templates/GrDetail03/index.vue b/layers/templates/GrDetail03/index.vue
index 35ca118..e150beb 100644
--- a/layers/templates/GrDetail03/index.vue
+++ b/layers/templates/GrDetail03/index.vue
@@ -87,8 +87,7 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
             :resources-data="getComponentGroup(item, 'description')"
             class="mt-2 text-left md:mt-5"
           />
-          <video
-            v-if="hasComponentGroup(item, 'video')"
+          <AtomsVideo
             :src="currentVideoSrc(item)"
             :autoplay="currentSlideIndex === index"
             muted