Responsives YouTube, eingebettet in Flex

Question

Ich habe versucht, responsive YouTube- und einige andere Inhalte in einen Flex-Container einzubetten, aber der Container, in dem sich die YouTube-Einbettung befindet, wächst nicht, sodass er sich entweder mit anderen Elementen überlappt oder von diesen überlappt wird. Ich bin mir nicht sicher, ob ich es gut erklärt habe, deshalb habe ich zur Demonstration auch einen Code und eine Box erstellt:

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

Wie kann ich es so ändern, dass der eingebettete Container mit der Größe des eingebetteten Videos wächst und schrumpft? Danke für deine Hilfe

Answer 1

更新

这是一个codesandbox解决方案。

1. 将 iframe 包裹在一个带有 position: "relative" 的容器中并设置其
   宽度：“100%”。
2. 将容器的 paddingBottom 设置为所需的
   纵横比值（以百分比表示）。例如，对于 16:9 的宽高比， 使用“56.25%” (9 / 16 * 100%)。
3. 将 iframe 设置为位置：“绝对”、顶部：0、左侧：0、宽度：“100%”、高度：“100%”。
4. 要确保视频下的文本不会被隐藏，请设置 flexFlow: "column",

以下是如何实现此目的的示例：

//Main container box

一些其他代码

YouTube player