반응형 iframe

video

width: 100%;
height: auto;

이렇게 css를 주면 창 크기에 맞게 반응한다.
하지만 iframe은 아니다.

iframe을 반응형으로 만들어 주는 법

/* 부모 요소 */
position: relative;
overflow: hidden;
max-width: 100%;
height: 0 !important;
padding-top: calc(9/16 * 100%); /* 비율에 맞춰 작성. 지금은 16:9 비율 */

/* iframe 요소에 */
position: absolute;
top: 0;
left: 0;
width: 100%; /* 상황에 맞게 조절 */
height: 100%; /* 상황에 맞게 조절 */

결과물