방법 - 반응형 Iframe
CSS로 반응형 iframe을 만드는 방법을 알아보세요.
반응형 Iframe
크기를 조정할 때 가로 세로 비율(4:3, 16:9 등)을 유지하는 iframe을 만듭니다.
가로 세로 비율이란 무엇입니까?
요소의 종횡비는 요소의 너비와 높이 사이의 비례 관계를 나타냅니다. 두 가지 일반적인 비디오 종횡비는 4:3(20세기의 보편적인 비디오 형식)과 16:9(HD 텔레비전, 유럽 디지털 텔레비전, YouTube 동영상의 경우 보편적)입니다.
방법 - 반응형 Iframe
1단계) HTML 추가:
<div>와 같은 컨테이너 요소를 사용하고 그 안에 iframe을 추가합니다.
예시
<div class="container">
<iframe
class="responsive-iframe"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
2단계) CSS 추가:
padding-top
컨테이너 DIV의 종횡비를 유지하려면 에 대한 백분율 값을 추가하십시오 . 다음 예에서는 YouTube 동영상의 기본 종횡비인 16:9의 종횡비를 생성합니다.
예 16:9 종횡비
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container
div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
다른 종횡비:
예 4:3 종횡비
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio */
}
예 3:2 종횡비
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
예 8:5 종횡비
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}
예 1:1 종횡비(높이와 너비는 항상 같음)
.container {
padding-top: 100%; /*
1:1 Aspect
Ratio */
}