어떻게 만들까요: 반응형 Iframe

CSS를 사용하여 반응형 iframe을 만드는 방법을 배웁니다.

반응형 iframe

가로세로 비율(4:3, 16:9 등)을 유지하는 iframe을 생성하세요:

가로세로 비율이란 무엇인가요?

요소의 가로세로 비율은 너비와 높이 간의 비율 관계를 설명합니다. 두 가지 일반적인 비디오 가로세로 비율은 4:3(20세기의 일반 비디오 형식)과 16:9(고해상도 TV와 유럽 디지털 TV 및 YouTube 비디오의 일반 형식)입니다.

How To - 반응형 Iframes

第一步 - 추가 HTML:

컨테이너 요소(예: <div>)를 사용하여 iframe을 추가하세요:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

第二步 - 추가 CSS:

위에 padding-top 기본값을 유지하려면 퍼센트 값을 추가하세요. 다음 예제는 16:9 가로세로 비율의 컨테이너를 생성합니다. 이는 YouTube 비디오의 기본 가로세로 비율입니다.

예제 - 16:9 가로세로 비율

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 가로세로 비율(9 / 16 = 0.5625) */
}
/* iframe의 스타일을 설정하여 div에 완전한 높이와 너비로 맞추세요 */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

직접 시도해보세요

기타 가로세로 비율

예제 - 4:3 가로세로 비율

.container {
  padding-top: 75%; /* 4:3 가로세로 비율 */
}

직접 시도해보세요

예제 - 3:2 가로세로 비율

.container {
  padding-top: 66.66%; /* 3:2 가로세로 비율 */
}

직접 시도해보세요

예제 - 8:5 가로세로 비율

.container {
  padding-top: 62.5%; /* 8:5 가로세로 비율 */
}

직접 시도해보세요

예제 - 1:1 가로세로 비율(높이와 너비가 항상 같음)

.container {
  padding-top: 100%; /* 1:1 비율 */
}

직접 시도해보세요