YoutubeAt

Click-to-play YouTube embed facade that shows a video capture frame as a cover image with play button overlay and timestamp badge. Clicking replaces the cover with the actual YouTube iframe.

Article Media & Embeds

Default

With captures

Long timestamp

Aspect ratio 4:3

With caption

Multiple in sequence

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { YoutubeAt } from './youtube-at'; const meta: StoryMeta = { title: 'YoutubeAt', category: 'Article Media & Embeds', description: 'Click-to-play YouTube embed facade that shows a video capture frame as a cover image with play button overlay and timestamp badge. Clicking replaces the cover with the actual YouTube iframe.', usage: `import { YoutubeAt } from '@/components/mdx/youtube-at';\n\n<YoutubeAt url="https://youtu.be/e8B2xey0SeA?t=67" videoDir="20260405-e8B2xey0SeA-demo" captures={[]} />`, }; export default meta; /** * Default - With timestamp and cover image * * Shows a capture frame from the video at the specified timestamp. * In this demo, captures array is empty so it falls back to iframe. */ export const Default = defineStory({ name: 'Default', render: () => ( <YoutubeAt url="https://youtu.be/e8B2xey0SeA?t=67" videoDir="20260405-e8B2xey0SeA-demo" captures={[]} /> ), }); /** * With captures - Simulates having capture frames available * * When captures array contains matching filenames, the component * shows the nearest capture as cover image. */ export const WithCaptures = defineStory({ name: 'With captures', render: () => ( <YoutubeAt url="https://youtu.be/e8B2xey0SeA?t=67" videoDir="20260405-e8B2xey0SeA-demo" captures={[ 'capture-00-01-00.jpg', 'capture-00-01-02.jpg', 'capture-00-01-04.jpg', 'capture-00-01-06.jpg', 'capture-00-01-08.jpg', 'capture-00-01-10.jpg', ]} /> ), }); /** Long timestamp (20+ minutes) */ export const LongTimestamp = defineStory({ name: 'Long timestamp', render: () => ( <YoutubeAt url="https://youtu.be/rpqb9RYUSw8?t=1200" videoDir="20260405-rpqb9RYUSw8-demo" captures={[]} /> ), }); /** Custom aspect ratio (4:3) */ export const AspectRatio4x3 = defineStory({ name: 'Aspect ratio 4:3', render: () => ( <YoutubeAt url="https://youtu.be/e8B2xey0SeA?t=67" videoDir="20260405-e8B2xey0SeA-demo" captures={[]} 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: () => ( <YoutubeAt url="https://youtu.be/e8B2xey0SeA?t=67" videoDir="20260405-e8B2xey0SeA-demo" captures={[]} caption="動画キャプションのサンプル: タイムスタンプ付き埋め込みファサード" /> ), }); /** Multiple in sequence - typical guide article layout */ export const MultipleInSequence = defineStory({ name: 'Multiple in sequence', render: () => ( <div className="max-w-[800px]"> <h3 className="text-zd-white pb-vgap-sm">Section A</h3> <YoutubeAt url="https://youtu.be/e8B2xey0SeA?t=30" videoDir="20260405-e8B2xey0SeA-demo" captures={[]} /> <h3 className="text-zd-white pb-vgap-sm">Section B</h3> <YoutubeAt url="https://youtu.be/e8B2xey0SeA?t=120" videoDir="20260405-e8B2xey0SeA-demo" captures={[]} /> <h3 className="text-zd-white pb-vgap-sm">Section C</h3> <YoutubeAt url="https://youtu.be/e8B2xey0SeA?t=300" videoDir="20260405-e8B2xey0SeA-demo" captures={[]} /> </div> ), });