>  Q&A  >  본문

Flex에 내장된 반응형 YouTube

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

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

으아악

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

P粉111641966P粉111641966236일 전292

모든 응답(1)나는 대답할 것이다

  • P粉329425839

    P粉3294258392024-03-22 19:02:43

    업데이트

    이것은 codesandbox 솔루션입니다.

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

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

    으아악

    다른 코드

    으아악

    회신하다
    0
  • 취소회신하다