問題敘述

使用VitePress一陣子了，想放的東西只靠官方提供的Markdown Extensions難免遇到限制

例如我要嵌入一個YouTube區塊？那要怎麼做呢？

如何解決

最先想到的解法是插入html iframe內容，但這做法又需要維護一堆重複iframe語法，寫Vue專案遇到這狀況時，都會想到抽成組件的吧

查了下官方文件，確實有支援使用vue組件的

那就直接來寫一個內嵌YouTube組件

<template>
  <div v-if="url" class="video-responsive">
    <iframe
      :src="url"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps<{
  id: string
}>()

const url = computed(() => `https://www.youtube.com/embed/${props.id}`)
</script>

<style scoped>
.video-responsive {
  position: relative;
  height: 0;
  /* 16:9 */
  padding-bottom: 56.25%;
  overflow: hidden;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

寫完之後，照著官方文件註冊為全域組件 (可看此commit)，之後就可以在md裡面開心的用啦!

<!-- YouTube 網址：https://www.youtube.com/watch?v=dQw4w9WgXcQ -->
<YouTube id="dQw4w9WgXcQ" />

---

參考資料：

• Using Vue in Markdown