VitePress 进阶：如何优雅地在文章中嵌入 YouTube 视频？(组件封装与避坑指南)
我的网站是用
vitepress 搭建的，在撰写技术文档时，我们经常需要插入 YouTube 视频教程。 很多站长习惯直接复制 YouTube 提供的 代码粘贴到 Markdown 里。虽然能用，但缺点很明显：
代码丑陋 ：文章里充斥着一大段 HTML 代码，难以维护。
手机端体验差 ：固定宽高导致在手机上视频显示不全，或者比例失调。 今天，我将分享一种
“优雅专业法” ，通过封装 Vue 组件，实现
一次配置，处处调用，且完美适配移动端 。同时，我会重点讲解在自定义主题结构下，如何解决
引用路径报错 的问题。 第一步：封装响应式视频组件 我们需要创建一个专门的组件，利用 CSS 技巧让视频保持 16:9 的黄金比例，并自适应屏幕宽度。 1. 创建组件文件 建议将组件放在主题文件夹下的组件目录中，这样结构更清晰。 推荐路径： docs/.vitepress/theme/components/YouTube.vue
(如果没有 components 文件夹，请手动新建) 代码内容 ( YouTube.vue )： <script setup>
defineProps({
id: {
type: String,
required: true
}
})
</script>
<template>
<div class="youtube-container">
<iframe
:src="'https://www.youtube.com/embed/' + id"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>
</template>
<style scoped>
.y…
