46 lines
977 B
Plaintext
46 lines
977 B
Plaintext
---
|
|
// src/components/Video.astro - SIMPLE responsive video component
|
|
export interface Props {
|
|
src: string;
|
|
title?: string;
|
|
controls?: boolean;
|
|
autoplay?: boolean;
|
|
muted?: boolean;
|
|
loop?: boolean;
|
|
aspectRatio?: '16:9' | '4:3' | '1:1';
|
|
preload?: 'none' | 'metadata' | 'auto';
|
|
}
|
|
|
|
const {
|
|
src,
|
|
title = 'Video',
|
|
controls = true,
|
|
autoplay = false,
|
|
muted = false,
|
|
loop = false,
|
|
aspectRatio = '16:9',
|
|
preload = 'metadata'
|
|
} = Astro.props;
|
|
|
|
const aspectClass = `aspect-${aspectRatio.replace(':', '-')}`;
|
|
---
|
|
|
|
<div class={`video-container ${aspectClass}`}>
|
|
<video
|
|
src={src}
|
|
controls={controls}
|
|
autoplay={autoplay}
|
|
muted={muted}
|
|
loop={loop}
|
|
preload={preload}
|
|
style="width: 100%; height: 100%;"
|
|
data-video-title={title}
|
|
>
|
|
<p>Your browser does not support the video element.</p>
|
|
</video>
|
|
{title !== 'Video' && (
|
|
<div class="video-metadata">
|
|
<div class="video-title">{title}</div>
|
|
</div>
|
|
)}
|
|
</div> |