Flex에 내장된 반응형 YouTube

Question

반응형 YouTube 및 기타 콘텐츠를 Flex 컨테이너에 삽입해 보았지만 YouTube가 포함된 컨테이너가 커지지 않아 서로 겹치거나 다른 요소와 겹칩니다. 잘 설명했는지 모르겠어서 시연할 코드와 상자도 만들었습니다.

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

으아악

삽입된 영상의 크기에 따라 삽입된 컨테이너가 늘어나고 줄어들도록 변경하려면 어떻게 해야 하나요? 도와주셔서 감사합니다

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",

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

으아악

다른 코드

으아악