[CSS] vimeo 영상 반응형으로 설정

vimeo영상을 종종 삽입할 때가 있는데

iframe으로 감싸져있어서 컨트롤하기가 어려운 부분이 있다.

 

또한 고정된 width와 height를 사용하기에는 반응형 웹에서는 적합하지가 않다.

CSS를 이용하여 반응형으로 컨트롤 하는 법을 알아보자.

 

 

<iframe src="동영상 URL" width="500" height="400" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

 

코드를 복사해 오면 width값과 height값이 포함되어 있는데 이것을 지워준다.

그리고 iframe을 감싸는 div를 만들어준다.

 

<div id="vimeoWrap">
<iframe src="동영상 URL" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

 

 

그리고 CSS를 아래와 같이 설정한다.

 

#vimeoWrap{
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
    margin: 0;
  }
#vimeoWrap iframe,
#vimeoWrap object,
#vimeoWrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}