33 lines
1.0 KiB
Plaintext
33 lines
1.0 KiB
Plaintext
---
|
|
// YouTubeEmbed.astro - Build-time component with full styling control
|
|
interface Props {
|
|
videoId: string;
|
|
title?: string;
|
|
className?: string;
|
|
aspectRatio?: string;
|
|
style?: 'default' | 'minimal' | 'rounded' | 'flat';
|
|
}
|
|
|
|
const {
|
|
videoId,
|
|
title = "YouTube Video",
|
|
className = "",
|
|
aspectRatio = "56.25%",
|
|
style = "default"
|
|
} = Astro.props;
|
|
|
|
const embedUrl = `https://www.youtube.com/embed/${videoId}`;
|
|
---
|
|
|
|
<div class={`not-prose my-6 ${className}`} data-style={style}>
|
|
<div class="bg-white border border-slate-200/80 rounded-xl overflow-hidden transition-all duration-200 hover:border-slate-300/80 p-1" style={`padding-bottom: calc(${aspectRatio} - 0.5rem); position: relative; height: 0; margin-top: 0.25rem; margin-bottom: 0.25rem;`}>
|
|
<iframe
|
|
src={embedUrl}
|
|
title={title}
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen
|
|
class="absolute top-1 left-1 w-[calc(100%-0.5rem)] h-[calc(100%-0.5rem)] border-none rounded-md"
|
|
/>
|
|
</div>
|
|
</div>
|