Flex에 내장된 반응형 YouTube

Question

반응형 YouTube 및 일부 다른 콘텐츠를 Flex 컨테이너에 포함하려고 시도했지만 YouTube가 포함된 컨테이너가 커지지 않아 겹치거나 다른 요소와 겹칩니다. 잘 설명했는지 모르겠어서 보여드리기 위해 코드와 박스도 만들어봤습니다: https://codesandbox.io/s/objective-mountain-m4dhhb?file=/src/App.jsimport{Box,Paper }from"@mui/mat

P粉329425839 · Answer

업데이트

이것은 codesandbox 솔루션입니다.

iframe을 position: "relative"로 컨테이너에 싸서 설정합니다
宽度：“100%”.
컨테이너의 paddingBottom를 원하는
으로 설정하세요. 백분율로 표시되는 종횡비 값입니다. 예를 들어 가로세로 비율이 16:9인 경우 “56.25%”(9 / 16 * 100%)를 사용하세요.
iframe을 位置：“绝对”、顶部：0、左侧：0、宽度：“100%”、高度：“100%”로 설정하세요.
동영상 아래의 텍스트가 숨겨지지 않도록 설정해 주세요. flexFlow: "column",

이를 달성하는 방법의 예는 다음과 같습니다.

으아악

다른 코드

으아악