2018 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
CSS – vimeo 영상 높이 값 반응형으로 적용하기

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

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

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

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

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

 위 코드처럼 만들었다면 CSS로 구성해보자.

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

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

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

nain

이메일 : nis@naminsik.com

리뉴얼하려고 생각한지가 어느덧 3년이 지났다. ㅠ 망...
.