반응형 블로그 동영상 크기 자동 조절 (iframe,object,embed)

반응형 웹에서 아이프레임등에 사이즈 고정값이 들어가기 때문에 레이아웃이 깨지는데 이를 DIV 코드로 미리 싸서 가로 100% 세로 56% 비율로 자동 조절 해줍니다.

<style> 
.embed-container { 
	position: relative;
    padding-bottom: 56.25%;
    height: 0; 
    overflow: hidden;
    max-width: 100%; 
    height: auto; 
}

.embed-container iframe,
.embed-container object,
.embed-container embed { 
	position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%; 
} 
</style> 
<div class="embed-container"> 유투브 동영상 코드 </div>

 

 

브라우저 가로 폭을 줄이면 동영상도 같이 줄어 듭니다. 유튜브 동영상 뿐만 아니라 다음tv 등 iframe, object, embed 방식이면 모두 적용이 가능 합니다.

 

코드를 미리 서식으로 만들어 놓고 사용하면 빠르고 편하게 적용 가능 합니다.

<div class="embed-container">     
	<iframe src="//www.youtube.com/embed/9zcstq0pk74" allowfullscreen="" height="360" width="640" frameborder="0"></iframe>
</div>

.embed-container { 
	position:relative;
    padding-bottom:56.25%; 
    height:0; 
    overflow:hidden;
}

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

http://embedresponsively.com 사이트에서 직접 코드를 얻을 수 있습니다.