vitepress-youtube-embed

Appearance

vitepress-youtube-embed ​

Vue component to embed responsive YouTube videos in VitePress markdown pages using a simple syntax.

npm npm license

vitepress-enhanced-site-links demo

Installation ​

npm
sh
npm i @miletorix/vitepress-youtube-embed

Usage ​

Configuration ​

docs/.vitepress/theme/index.ts
typescript
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
 
import { YouTubeEmbed } from '@miletorix/vitepress-youtube-embed'
import '@miletorix/vitepress-youtube-embed/style.css'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ctx.app.component('YouTubeEmbed', YouTubeEmbed) 
  }
}

YouTube Embed ​

vue
<YouTubeEmbed video-id="video-id..." />

Example ​

Source:

youtu.be/dQw4w9WgXcQ?feature=shared

or

youtube.com/watch?v=dQw4w9WgXcQ&list=RDdQw4w9WgXcQ&start_radio=1

Input

example.md
vue
<YouTubeEmbed video-id="dQw4w9WgXcQ" />

Output