css – 동영상링크화면 반응형디자인

<div class=”embed-container”>
<iframe width=”853″ height=”480″ src=”http://www.youtube.com/embed/ozEu_rWSTF0″ frameborder=”0″ allowfullscreen></iframe>
</div>

상대위치에 높이를 0으로 설정하면 아무것도안나온다.

여기서 트릭이 있는데  패딩을 상하로 설정하면 내부 컨텐츠들이 보인다.

상대위치 컨테이너의 자식들을 absolute로 설정하면 일단 보이긴할것이다. 여기 width: 100%, height:100%을 하면 부모를 크기에따라 꽉찰테니 반응형 디자인이 나오는것이지요.

.embed-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
padding-top: 30px;
margin: 15px auto;
overflow: hidden;
}

.embed-container iframe, .embed-container object, .embed-container embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}