Youtube

Embeds YouTube videos in MDX articles with privacy-enhanced mode. Supports multiple URL formats (youtube.com, youtu.be), uses youtube-nocookie.com, responsive 16:9 aspect ratio, lazy loading.

Article Media & Embeds

Default

URL

Short URL

With className

Aspect ratio 4:3

With caption

Multiple videos

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { Youtube } from './youtube'; const meta: StoryMeta = { title: 'Youtube', category: 'Article Media & Embeds', description: 'Embeds YouTube videos in MDX articles with privacy-enhanced mode. Supports multiple URL formats (youtube.com, youtu.be), uses youtube-nocookie.com, responsive 16:9 aspect ratio, lazy loading.', usage: `import { Youtube } from '@/components/mdx/youtube';\n\n<Youtube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />`, }; export default meta; /** * Default - Standard YouTube URL * * Uses the standard youtube.com/watch?v= format */ export const Default = defineStory<Parameters<typeof Youtube>[0]>({ name: 'Default', controls: [ { type: 'text', prop: 'url', label: 'URL', defaultValue: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', }, ], render: ({ url = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' } = {}) => <Youtube url={url} />, }); /** Short URL format (youtu.be) */ export const ShortUrl = defineStory({ name: 'Short URL', render: () => <Youtube url="https://youtu.be/dQw4w9WgXcQ" />, }); /** With custom className */ export const WithClassName = defineStory({ name: 'With className', render: () => ( <Youtube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" className="border-2 border-zd-link" /> ), }); /** Custom aspect ratio (4:3) */ export const AspectRatio4x3 = defineStory({ name: 'Aspect ratio 4:3', render: () => <Youtube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" aspectRatio="4 / 3" />, }); /** * With caption — wraps in <figure> and renders a centered <figcaption> * * Uses the canonical caption styling shared with ArticleImage and YouTubeCaptureWip. */ export const WithCaption = defineStory({ name: 'With caption', render: () => ( <Youtube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" caption="動画キャプションのサンプル: モジュラーシンセのパッチング解説" /> ), }); /** Multiple videos in sequence */ export const MultipleVideos = defineStory({ name: 'Multiple videos', render: () => ( <div className="max-w-[800px]"> <h3 className="text-zd-white pb-vgap-sm">モジュラーシンセデモ動画</h3> <Youtube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" /> <h3 className="text-zd-white pb-vgap-sm">パッチング解説</h3> <Youtube url="https://youtu.be/dQw4w9WgXcQ" /> </div> ), });