iframe 영상 반응형으로 삽입하기
아래 소스는 부트스트랩에서 사용하는 방법이다.
영상 요소를 가로세로 100%로 넣고, 그것을 둘러싼 부모요소에 padding-bottom을 비율에 맞게 넣어줌으로써 반응형으로 만들 수 있다.
<div style="position:relative;display:block;height:0;padding:0;overflow:hidden;padding-bottom:56.25%; border:1px solid red">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8" style="position:absolute;top:0;left:0;bottom:0;height:100%;width:100%;border:0;">
</div>
출처 : http://bootstrapk.com/components/#responsive-embed
반응형
'CSS' 카테고리의 다른 글
| 유튜브 동영상 z-index 문제 (0) | 2015.09.23 |
|---|---|
| vertical-align:middle 에 관하여. (0) | 2015.06.05 |
| IE a 링크 점선 없애기 (0) | 2015.06.01 |
| CSS3 여러가지 속성들 (0) | 2013.11.22 |
| CSS3 animation 끝에 정지 (0) | 2013.11.21 |