[ CSS 응용 ] 유투브,비메오 영상을 반응형으로 만들기 (iframe, embed 반응형)

| 개요

iframe 이나 embed 코드를 그냥 이용하면 절대값의 사이즈를 가지기 때문에 모바일이나 다른 환경에서는 반응형으로 잡히지 않을때가 있다. 이럴때 사용할 수 있는 코드를 정리하였습니다.

 

 

| 예제

유튜브나 비메오등에서 영상을 퍼올때 iframe이나 embed형태로 가져온다.

 

<iframe src="https://player.vimeo.com/video/38971311" width="640" height="360" frameborder="0" allowfullscreen></iframe>

 

가져온 태그를 div로 감싸준다.

 

 

<div>
   <iframe src="https://player.vimeo.com/video/38971311" width="640" height="360" frameborder="0" allowfullscreen></iframe>
</div>

 

감싸 안은 div 태그에 CSS를 적용하고, 안에 iframe에 기존에 있는 width값과 height값을 제거하고 다음 CSS를 적용한다.

 

 

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
   <iframe src="https://player.vimeo.com/video/38971311" frameborder="0" allowfullscreen style="position: absolute; top: 0;left: 0; width: 100%; height: 100%;"></iframe>
</div>

 

위와 같이 태그에 바로 적용도 가능하고, 별도로 CSS를 분리하여 사용도 가능하다.

다음은 감싸안은 div태그에 class를 embed-container로 주고 정리한 내용이다.

 

 

<style>
   /* 16:9 비율인 경우 56.25%, 4:3 비율인 경우 75%로 설정 */
   .embed-container { position: relative; padding-bottom: 56.25%; height: 0; }
   .embed-container embed, .embed-container iframe { position: absolute;top: 0;left: 0; width: 100%; height: 100%; border: 0;}
</style>
<div class="embed-container">
   <iframe src="https://player.vimeo.com/video/38971311" frameborder="0" allowfullscreen></iframe>
</div> 

 

 

| 결과값