html css, youtube iframe responsive
페이지 정보
본문
CSS
```
.youtube-video-wrapper {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.youtube-video-wrapper iframe, .youtube-video-wrapper object, .youtube-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}
```
HTML
```
<div class="youtube-video-wrapper"><iframe src="https://www.youtube.com/embed/WMweEpGlu_U?rel=0" frameborder="0"></iframe></div>
```
## 참고
https://avexdesigns.com/blog/responsive-youtube-embed
https://stackoverflow.com/questions/52393814/css-100-width-of-youtube-embed-video
```
.youtube-video-wrapper {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.youtube-video-wrapper iframe, .youtube-video-wrapper object, .youtube-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}
```
HTML
```
<div class="youtube-video-wrapper"><iframe src="https://www.youtube.com/embed/WMweEpGlu_U?rel=0" frameborder="0"></iframe></div>
```
## 참고
https://avexdesigns.com/blog/responsive-youtube-embed
https://stackoverflow.com/questions/52393814/css-100-width-of-youtube-embed-video
추천0
댓글목록
등록된 댓글이 없습니다.
16
3
공공데이터포털 OpenAPI
