import { YoutubeAt } from './youtube-at';
/**
* YoutubeAt Component
*
* A 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.
*/
export const meta = {
title: 'MDX/YoutubeAt',
};
/**
* 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 = () => (
<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 = () => (
<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 = () => (
<YoutubeAt
url="https://youtu.be/rpqb9RYUSw8?t=1200"
videoDir="20260405-rpqb9RYUSw8-demo"
captures={[]}
/>
);
/**
* Custom aspect ratio (4:3)
*/
export const AspectRatio4x3 = () => (
<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 = () => (
<YoutubeAt
url="https://youtu.be/e8B2xey0SeA?t=67"
videoDir="20260405-e8B2xey0SeA-demo"
captures={[]}
caption="動画キャプションのサンプル: タイムスタンプ付き埋め込みファサード"
/>
);
/**
* Multiple in sequence - typical guide article layout
*/
export const MultipleInSequence = () => (
<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>
);