frontAnswerer/lib/components/ViewPublicationPage/tools/YoutubeEmbedIframe.tsx

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>
  );
}