[CSS] 삽입된 유튜브 동영상을 반응형(Responsive)으로 만들기

워드프레스 블로그를 사용하면서 유튜브 동영상을 주소만 넣으면 아주 간단하게 삽입할 수 있습니다. 하지만 이 유튜브 동영상을 사용자에게 보여주는 과정에서 문제가 발생하는데 크기가 자동으로 조절 되지 않고 굉장히 크거나 작게 표현되는 것입니다.

구글링 해보니 그 문제점을 CSS 로 해결 할 수 있는 방법이 있어 기록으로 남겨 봅니다.

(워드프레스의 경우를 예로 하고 있지만 유튜브 동영상이 임베드 된 경우면 거의 비슷할테니 같은 방식을 적용하면 워드프레스가 아닌 다른 플랫폼에도 적용 가능 할 것입니다.)

삽입된 유튜브 동영상의 구조

삽입된 유튜브 동영상의 경우 아래와 보통 아래와 같은 구조로 되어 있습니다.

<span class="embed-youtube">
    <iframe ... >
    </iframe>
</div>

실제 유튜브 요소는 iframe 에 들어 있고, 그 요소를 embed-youtube 라는 클래스를 가진 부모요소가 감싸고 있는 형식입니다.

유튜브를 반응형으로 만들기

유튜브를 반응형으로 만들기 위한 CSS 코드는 아래와 같습니다.

.embed-youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.embed-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

차근차근 하나씩 알아봅시다.

.embed-youtube 의 크기를 반응형으로

.embed-youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

일단 부모요소의 크기를 반응형으로 만들어야 합니다. width 를 100% 로 지정해주고, height 는 0으로 만듭니다. 그런데 이렇게 하면 사실상 크기는 0이잖아요? 대신에 padding-bottom 을 56.25%(16:9 비율로 반들어주기 위해)로 지정해줌으로써 .embed-youtube 의 크기를 유동적으로 만들어 줍니다.

iframe 을 부모요소의 크기에 맞게 조절하기

.embed-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

부모요소의 크기가 동적으로 변함에따라 iframe 이 부모요소의 크기에 맞게 조절 되도록 만들어줍니다.

보통의 경우라면 iframe 이 .embed-youtube 크기와 상관없이 마음대로 표시 되기 때문에 크기가 종속적으로 변하도록 하기 위해서 position 을 absolute 로 지정합니다. iframe 에게 absolute 가 적용되도록 하기 위해서 .embed-youtube 의 position 도 relative 로 지정해주는 것입니다.

(position 에 대한 더욱 자세한 정보는 포스트 하단의 링크를 참고 하세요)

이제 iframe 의 크기를 .embed-youtube 와 일치하도록 만들기 위해 width 와 height 를 100%로 지정해주면 유튜브 동영상이 고정된 크기가 아닌 유동적으로 변할 수 있게 됩니다.

위에서도 언급했지만 이러한 경우는 비단 워드프레스를 사용할 때 뿐만이아닌 비슷한 구조를 가진 모든 경우에 CSS 를 통해 수정할 수 있습니다.

끝.