38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
|
import { Box, SxProps } from "@mui/material";
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
videoUrl: string;
|
||
|
|
containerSX?: SxProps;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
|
||
|
|
const extractYoutubeVideoId = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
|
||
|
|
const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];
|
||
|
|
if (!videoId) return null;
|
||
|
|
|
||
|
|
const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
pointerEvents: "none",
|
||
|
|
"& iframe": {
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
},
|
||
|
|
...containerSX
|
||
|
|
}}>
|
||
|
|
<iframe
|
||
|
|
src={embedUrl}
|
||
|
|
title="YouTube video player"
|
||
|
|
frameBorder="0"
|
||
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
|
|
allowFullScreen
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|