[CSS] iframe 반응형으로 비율유지하며 줄어들게 하기

1. iframe을 삽입할 경우에는 iframe의 바깥에 부모로 하나를 더 감싸준다.

 

iframe 상위로 더 감싸준 videoInner

 

.videoInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%; /*16:9의 비율인 경우 56.25%*/
    /* padding-bottom값은 4:3 비율인 경우 75%로 설정합니다 */
}

 

padding-bottom 의 비율에 따라 저절로 줄어들면서 안에 있는 iframe이 깨지지 않게 된다.

.videoInner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 15px; /*사이드 간격은 상황에 따라*/
    box-sizing: border-box;
 }

 

video태그의 경우 경로를 지정하여 직접 파일을 삽입하기 때문에 width, height 를 100% 로 지정해주면 반응형으로 들어갈때 깨지지 않지만 iframe의 경우는 유의하자.