Storage
[유투브] 유튜브 동영상 반응형으로 넣기
두루루루루
2018. 9. 27. 16:25
- 유튜브 동영상을 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/