iframe 반응형 YouTube, Vimeo, 다음팟 플레이어 넣기

//----------- 스타일 지정 [반응형] (YouTube, Vimeo, 다음팟 공통)

<style>

.trailer { position:relative; padding-bottom:56.25%; }

.trailer iframe { position:absolute; width:100%; height:100%; }

</style>

※ 반응형 플레이어 구성을 위한 핵심 요소들의 기능은 다음과 같다.

- position:relative;        //    chromium 기반 브라우져에서는 없어도 무방하지만 기타 브라우져에서는 이 옵션이 없으면 플레이어는 본문의 하단 저 밑까지 높이가 늘어지게 된다.

- padding-bottom:56.25%;        //    chromium 기반 브라우져에서는 없어도 무방하지만 기타 브라우져에서는 이 옵션이 없으면 플레이어는 보이지 않고 음성만 듣게 된다.

※ 56.25라는 수치는 16:9 영상의 너비 16을 100%로 봤을 때, 높이 9에 해당하는 비율이다. 플레이어를 9에 해당하는 높이 만큼 출력해준다. 다른 비율 영상의 경우,

"(100(%)÷가로픽셀)×세로픽셀" 이렇게 하면 대략적인 높이의 %값을 구할 수 있다.

(ex. (100/647)*370≒57.1870... 반 올림하면 대략 57.19%가 된다.)

- position:absolute;        //    chromium 기반 브라우져에서는 없어도 무방하지만 기타 브라우져에서는 이 옵션이 없으면 플레이어는 보이지 않고 음성만 듣게 된다.

- width:100%        //    플레이어 너비를 본문 폭의 최대로 맞춰 준다. 

- height:100%        //    플레이어 높이를 최대로 맞춰 준다.

//----------- YouTube 코드

<div class="trailer">

<iframe src="http://www.youtube.com/embed/영상코드?rel=1&amp;vq=hd1080&amp;autoplay=1&amp;color=white&amp;theme=light" frameborder="0" allowfullscreen>

</iframe></div>

//----------- Vimeo 코드

<div class="trailer">

<iframe src="//player.vimeo.com/video/영상코드?badge=0&amp;color=ffffff&amp;autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

</iframe></div>

//----------- 다음팟 코드

<div class="trailer">

<iframe src="http://videofarm.daum.net/controller/video/viewer/Video.html?vid=영상코드&amp;play_loc=undefined&amp;autoPlay=true&amp;profileName=HIGH&amp;showPreAD=false&amp;showPostAD=false" frameborder="0" scrolling="no">

</iframe></div>