YouTube réactif intégré à Flex

Question

J'ai essayé d'intégrer YouTube réactif et d'autres contenus dans un conteneur Flex, mais le conteneur dans lequel se trouve l'intégration YouTube ne s'agrandit pas, il se chevauche donc ou est recouvert par d'autres éléments. Je ne sais pas si je l'ai bien expliqué, alors j'ai aussi fait un code et une boîte pour démontrer :

https://codesandbox.io/s/objective-mountain-m4dhhb?file=/src/App.js

import { Box, Paper } from "@mui/material";

export default function App() {
  return (
    <Box
      sx={{
        display: "flex",
        flexFlow: "column wrap",
        gap: 2,
        maxWidth: "960px"
      }}
    >
      <Box>
        <Paper
          variant="outlined"
          sx={{
            padding: 2
          }}
        >
          <h2>Some content</h2>
          <Box>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
              maximus at enim in sollicitudin. Nam suscipit tellus sit amet
              porttitor hendrerit. Lorem ipsum dolor sit amet, consectetur
              adipiscing elit. Quisque vel dolor felis. Nulla sodales felis
              iaculis venenatis aliquam. Integer vehicula turpis a mauris
              maximus, eu sagittis ligula dignissim. In faucibus est lacus,
              auctor ornare lacus auctor ut. Morbi vitae ullamcorper nisi.
              Integer non sagittis erat.
            </p>
          </Box>
        </Paper>
      </Box>
      <Box>
        <Paper
          variant="outlined"
          sx={{
            padding: 2
          }}
        >
          <h2>YouTube player</h2>
          <Box sx={{ display: "flex" }}>
            <iframe
              src="https://www.youtube.com/embed/-opb8DdWBIM"
              title="YouTube video player"
              style={{
                margin: "0 auto",
                width: "100%",
                aspectRatio: "16 / 9"
              }}
            />
          </Box>
        </Paper>
      </Box>
      <Box>
        <Paper
          variant="outlined"
          sx={{
            padding: 2
          }}
        >
          <h2>Some other content</h2>
          <p>
            In vehicula a est non tempor. Maecenas ut leo ac arcu sollicitudin
            ullamcorper et vitae lectus. In venenatis lectus purus, non rhoncus
            ante pellentesque a. Sed sollicitudin leo sit amet odio ultricies
            pretium. Mauris eu nibh diam. Sed ante ipsum, efficitur ac leo eget,
            cursus ornare augue. Morbi aliquet porta rhoncus. Quisque ut tellus
            metus. Nam purus arcu, accumsan a dolor at, rhoncus iaculis velit.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra,
            per inceptos himenaeos. Nulla augue metus, semper id varius sit
            amet, congue vitae nunc. Phasellus interdum arcu quis quam tristique
            porta. Curabitur sit amet imperdiet turpis, ut facilisis mauris.
            Aliquam sit amet commodo nisi. Quisque elementum nulla ac
            ullamcorper interdum. Aliquam interdum sed lorem a tempus.
          </p>
        </Paper>
      </Box>
    </Box>
  );
}

Comment puis-je le modifier pour que le conteneur intégré grandisse et rétrécisse avec la taille de la vidéo intégrée ? Merci pour votre aide

Answer 1

Mise à jour

Il s'agit d'une solution codesandbox.

1. Enveloppez l'iframe dans un conteneur avec position: "relative" et placez-le
   宽度：“100%”.
2. Réglez le paddingBottom du conteneur sur le
   souhaité Valeur du rapport hauteur/largeur exprimée en pourcentage. Par exemple, pour un format d'image 16:9, Utilisez “56.25%” (9/16*100%).
3. Définissez l'iframe sur 位置：“绝对”、顶部：0、左侧：0、宽度：“100%”、高度：“100%”.
4. Pour vous assurer que le texte sous la vidéo n'est pas masqué, veuillez définir flexFlow: "column",

Voici un exemple de la façon d'y parvenir :

//Main container box

Un autre code

YouTube player