[CSS] 반응형웹 - Youtube에도 반응형 class 적용하기

2016-08-21

일반적으로 Youtube에서 제공하는 소스 퍼가기는 아래와 같이 widthheight가 지정되어 있다.

<iframe width="420" height="315" src="https://www.youtube.com/embed/Cj06IrPfLyM" frameborder="0" allowfullscreen></iframe>

레이아웃이 고정된 웹페이지는 상관없지만, 반응형 디자인이 적용된 웹페이지에서는 이렇게 하면 비디오 사이즈가 레이아웃과 일치하지 않아 엉망으로 나타나게 된다. 이것저것 시도해 보다가 골치가 아파서 구글신에게 문의를 해보니, 간단하게 답변이 나왔다.

우선 CSS에 아래 코드를 추가한다.

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
	overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

이제 Youtube 영상을 class="video-container"로 감싼다:

<div class="video-container">
         <iframe src="http://www.youtube.com/embed/Cj06IrPfLyM" frameborder="0" width="420" height="315"></iframe>
</div>

이제 간단하게 적용이 되었다.

Thanks to AVEX.