[iframe 태그] 영화 예고편과 네이버 영화 깔끔하게 넣기

<!-- { 스타일 }

// position : static        (기본값-static 은 left, right, top, bottom 속성이 무시 됨),

relative    (static 값에서의 위치를 기준으로 top, right, bottom, left 에 따라 element가 이동)

- 하위 element는 상위 element의 기준 위치에 따라 이동,

absolute  (화면의 절대적인 좌표로 지정),

fixed        (absolute와 동일. 다만, 스크롤을 내려도 브라우저 상에서 위치가 변하지 않고 고정)

// 기타: width, height, top, left, right, bottom, background:#fff 등

 -->

<!-- 스타일 (선택1) 다음 or YouTube -->

<style type="text/css">

#trailer {position:relative; width:896px; height:504px;}

#movie_info_frame {position:relative; width:695px; height:1045px; margin:0 auto; border-width:1px; border-style:solid; border-color:#CCCCCC; overflow:hidden;}

#movie_info {position:relative; width:905px; height:1200px; margin:-155px 0px 0px -210px;}

</style>

<!-- 스타일 (선택2) IMDB -->

<style type="text/css">

#trailer_frame {position:relative; width:896px; height:504px; margin:5px auto; overflow:hidden;}

#trailer {position:relative; width:1045px; height:514px; margin:-10px 0px 0px -10px;}

#movie_info_frame {position:relative; width:695px; height:1045px; margin:0 auto; border-width:1px; border-style:solid; border-color:#CCCCCC; overflow:hidden;}

#movie_info {position:relative; width:905px; height:1200px; margin: -155px 0px 0px -210px;}

</style>

// ※ 핵심: overflow:hidden; (네이버 영화 페이지의 불필요한 부분을 보이지 않게 숨겨주는 역할을 한다.)

- IMDB는 trailer에도 overflow:hidden; 적용.

// top, left, right, bottom으로 주는 여백은 iframe의 width, height 값을 기준 틀로하고 위치만 벗어나는 형태이다. 그래서 margin으로 처리하는 것이 좋다.

<!-- { 컨텐츠 }

// trailer: 영화 예고편 (1순위: 다음, 2순위: IMDB, 3순위: YouTube)

// movie_info: 영화 정보

- trailer, movie_info는 임의 값이다. 원하는 것으로 지정해주면 된다.

 -->

<!-- (선택1) 1순위 다음 영화 예고편 코드 -->

<center>

<iframe id="trailer" 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></center>

// 옵션 커맨드 ("&amp;"는 커맨드 사이에 넣어 줌. 그냥 "&" 넣어도 무관)

- play_loc=undefined: 기본 커맨드이며 정확한 역할은 모르겠으나 뺄 경우 영상을 불러오지 못함.

- autoPlay=: 자동재생 (true=켜기, false=끄기)

- profileName=: 재생화질 (HIGH=720p, MAIN=360p+, BASE=360p, LOW=240p)

HIGH는 하위 품질을 호환함.

- showPreAD=: 재생 시작 전 광고 (true=켜기, false=끄기)

- showPostAD=: 재생 종료 후 광고 (true=켜기, false=끄기)

커맨드를 넣어도 재생 종료 후에 광고가 나옴. 연속적으로 영상 감상 시 일정 횟수 나오다가 안나옴.

<!-- (선택2) 2순위 IMDB 영화 예고편 코드 -->

<div id="trailer_frame">

<iframe id="trailer" src="http://www.imdb.com/video/imdb/영상코드/html5?format=720p&w=896&h=504" scrolling="no" frameborder="0">

</iframe></div>

// 옵션 커맨드 ("&"는 커맨드 사이에 넣어 줌)

- format=: 재생화질 (720p, 480p, 240p=Standard)

720p는 하위 품질을 호환함.

- w=: 가로크기

- h=: 세로크기

<!-- (선택3) 3순위 YouTube 영화 예고편 코드 -->

<center>

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

</iframe></center>

// 옵션 커맨드 ("&amp;"는 커맨드 사이에 넣어 줌. 그냥 "&" 넣어도 무관)

- vq=: 재생화질 (hd1080, hd720, large=480p, medium=360p, small=240p)

hd1080은하위 품질을 호환함.

- autoplay=: 자동재생 (1=켜기, 0=끄기)

- allowfullscreen: 전체화면기능

<!-- 네이버 영화 정보 코드 -->

<div id="movie_info_frame">

<iframe id="movie_info" src="페이지주소" scrolling="no" frameborder="0"></iframe>

</div>

* 적용한 모습