iframe 반응형

iframe

html 인라인 프레임으로, 별도의 외부의 웹 페이지 문서를 테이블이나 이미지와 같은 특정 위치에 삽입하는 기능이다.

🔎 문제

반응형 작업을 진행중이었고, 화면에 맞게 iframe의 css 수정이 필요했다.

💡 해결방안

<div>
    <iframe width="500" height="310" src="https://youtu.be/7z3i6JPUqws?list=RD7z3i6JPUqws" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

/* 부모요소 */
div {
    position: relative;
    padding-top: 56%;
    width: 100%;
    height: 0;
}

/* iframe */
div > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

부모요소에 width: 100% 로 설정하고 height: 0 으로 설정해주고, padding-top: 56% 을 넣어줌으로써 높이를 차지하게 만들어준다. 이 경우는 영상이 16:9의 비율인 경우이다. 만약 영상이 4:3 비율인 경우에 padding-top: 75% 로 설정해준다.

또한, 자식에게 width: 100% 로 설정하여 유동적으로 크기가 변할 수 있도록 만들어준 것이다.