vimeo를 삽입하다보면 iframe을 이용해서 홈페이지에 삽입하게 된다.
그런데 이게 아이프레임으로 크기를 잡아버려서 브라우저 창이 조절 될 때 안의 영상은 이상한 비율로 보여질 때가 있다.
이는 반응형웹에 적절하지 않은 사항이기 때문에 팁을 하나 얻어왔다.
참고로 처음에는 자바스크립트로 엘리먼트를 제어하는 것을 만들어서 사용해 왔으나 순수 css만으로도 충분히 구현해 낼 수 있기에 css로 처리하려고 한다.

 아래 설명을 보면서 진행해보자.

<iframe src="//player.vimeo.com/video/동영상 주소" width="500" height="281" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

위 코드처럼 처음에는 width와 height 값이 들어가 있을 것이다. 지워라!

<iframe src="//player.vimeo.com/video/동영상 주소" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

 이렇게 넓이/높이 값이 뺀 상태로 만든다.

이 아이프레임을 감싸는 엘리먼트 하나를 만든다.

<div id="vimeoWrap">
    <iframe src="//player.vimeo.com/video/동영상 주소" 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%;
}

 위 코드처럼 스타일을 만들었다면 정상적으로 보여질 것이다.

youtube 영상도 코드가 있으니 아래 링크로 가서 참고하여 사용해보자.

출처 : http://andmag.se/2011/11/responsive-embeds/comment-page-1/