vitepress-youtube-embed

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

Live Demo and more information

✨ See it in action:
👉 https://miletorix.github.io/vitepress-youtube-embed/

Installation

npm i @miletorix/vitepress-youtube-embed

Usage

Configuration

// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
 
import { YouTubeEmbed } from '@miletorix/vitepress-youtube-embed' // [!code ++]
import '@miletorix/vitepress-youtube-embed/style.css' // [!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ctx.app.component('YouTubeEmbed', YouTubeEmbed) // [!code ++]
  }
}

YouTube Embed

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

Example

Source:

youtu.be/dQw4w9WgXcQ?feature=shared

or

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

Input

<YouTubeEmbed video-id="dQw4w9WgXcQ" />

Output