iframe 높이 자동 조절하기

텍스트기존 iframe태그로 video를 삽입하면 높이값이 고정되어 있어서 반응형이
화면 크기에 따라 반응형으로 조절하려면 iframe를 감싸고 있는 부모 태그 padding값으로 조정하면 된다

html

<div class="video-inner" style="background-color: antiquewhite;">
    <iframe frameborder="0" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed"></iframe>
</div>

css

.video-inner{
    position: relative;
    width: 90%; /* 넓이 값은 조정해서 사용 */
    padding-bottom: 50.25%;
    overflow: hidden;
}
.video-inner iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}