Responsive 유튜브(비메오) 임베딩 하기
워드프레스로 요즘 유행하는 리스폰시브 테마를 구현하다가 비디오를 임베딩 할일이 생겼다. 유튜브(YouTube)나 비메오(Vimeo)의 경우 보통 iframe을 사용해서 로딩되기 때문에 가로세로 길이를 고정하지 않고 CSS만 갖고 동적으로 표현하려니 쉽지 않았다. 그냥 jQuery로 계산해서 처리하려다가 혹시나 해서 구글링 해보다가 http://avexdesigns.com/responsive-youtube-embed/ 글을 발견했다. 계산식도 없이 CSS만 갖고 리사이징을 하는 구현 아이디어를 보니 무릎이 탁 쳐진다. 역시 세상에 참 똑똑하신 분들 많은걸 새삼 깨닫는다. HTML 코드 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%; } 동작 원리 iframe에 width:100%, height:100% 속성을 줘서 일단 부모 엘리먼트를 꽉채우도록 만들어 둔다. ...