響應式 YouTube 嵌入 Flex 中

Question

我嘗試在 Flex 容器中嵌入響應式 YouTube 以及其他一些內容，但 YouTube 嵌入的容器不會增長，因此要么重疊，要么被其他元素重疊。我不確定我是否解釋得很好，所以我還製作了一個程式碼和盒子來演示：

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

如何更改才能使嵌入的容器隨著嵌入影片的大小而增加和縮小？ 感謝您的幫助

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