Portal/rsconcept/frontend/src/components/view/embed-youtube.tsx

44 lines
1.1 KiB
TypeScript
Raw Normal View History

2024-06-07 20:17:03 +03:00
interface EmbedYoutubeProps {
/** Video ID to embed. */
2024-06-07 20:17:03 +03:00
videoID: string;
/** Display height in pixels. */
2024-06-07 20:17:03 +03:00
pxHeight: number;
/** Display width in pixels. */
2024-06-07 20:17:03 +03:00
pxWidth?: number;
}
/**
2024-10-30 21:35:43 +03:00
* Embeds a YouTube video into the page using the given video ID and dimensions.
*/
2025-02-07 10:53:49 +03:00
export function EmbedYoutube({ videoID, pxHeight, pxWidth }: EmbedYoutubeProps) {
2024-06-07 20:17:03 +03:00
if (!pxWidth) {
pxWidth = (pxHeight * 16) / 9;
}
return (
<div
className='relative'
style={{
height: 0,
paddingBottom: `${pxHeight}px`,
paddingLeft: `${pxWidth}px`
}}
>
<iframe
allowFullScreen
title='Встроенное видео Youtube'
allow='accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
className='absolute top-0 left-0 border'
style={{
minHeight: `${pxHeight}px`,
minWidth: `${pxWidth}px`
}}
width={`${pxWidth}px`}
height={`${pxHeight}px`}
src={`https://www.youtube.com/embed/${videoID}`}
/>
</div>
);
}