[CSS] 유튜브 영상 iframe(아이프레임) 반응형 넣기

웹페이지에 영상 원본파일을 넣게 되는 경우에

용량으로 인해 github에 push 가 제한되거나 하는 경우가 있기 때문에

되도록이면 iframe을 이용해서 외부 영상을 끌어오는 형태로 삽입하고 있다.

 

이때 아이프레임 반응형을 위해 넣는 정석같은 코드다.

.vid_ifr_inner {
    position: relative;
    width: 100%;
    padding-bottom:52.25%
}
.vid_ifr_inner iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
}

<div className="vid_ifr_inner">
    <iframe></iframe>
</div>

 

이렇게 넣게 되면 모바일~태블릿 사이즈에 대응하는 반응형 사이즈로 알아서 리사이즈된다.