50 lines
1.3 KiB
TypeScript
50 lines
1.3 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`;
|
|
// https://www.youtube.com/shorts/9VgqBPd6RPA
|
|
// https://www.youtube.com/watch?v=I2N8hTHhvGY
|
|
return (
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
height: "100%",
|
|
pointerEvents: "none",
|
|
"& iframe": {
|
|
width: "100%",
|
|
height: "100%",
|
|
},
|
|
...containerSX,
|
|
}}
|
|
>
|
|
<Box
|
|
component="video"
|
|
sx={{
|
|
width: "100%",
|
|
height: "100%",
|
|
}}
|
|
autoPlay
|
|
muted
|
|
src={videoUrl}
|
|
/>
|
|
{/* <iframe
|
|
src={embedUrl}
|
|
title="YouTube video player"
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowFullScreen
|
|
/> */}
|
|
</Box>
|
|
);
|
|
}
|