CSS
iframe 영상 반응형으로 삽입하기
먹세
2015. 6. 2. 15:01
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
반응형