[유투브] 유튜브 동영상 반응형으로 넣기

- 유튜브 동영상을 iframe에 넣어서 레이아웃을 반응형으로 사용해보기

-> 가로는 width 100%로 지정해준다. height는 css로 지정하되 div는 height:0으로 감싼다.

* 유튜브url뒤에 "?rel=0" 붙여주기 -> 플레이 영상에대한 관련 동영상 목록을 0으로 하면 재생후 보이지 않기 1로 하면 재생 후 보이기

[html]

<div class="video-wrap">       <iframe width="100%" src="https://www.youtube.com/embed/dnOi1PwmgG4" frameborder="0" allowfullscreen></iframe> </div>

[css]

.video-wrap{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}   .video-wrap iframe,.video-wrap object,.video-wrap embed{position:absolute;top:0;left:0;width:100%;height:100%;}

.video-wrap{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.video-wrap iframe,.video-wrap object,.video-wrap embed{position:absolute;top:0;left:0;width:100%;height:100%;}

끝,,,!

-> 적용 : https://jsfiddle.net/Lqv35y97/

출처 : http://avexdesigns.com/responsive-youtube-embed/