(iframe)아이프레임 반응형 비율 유지 (검은 띠 안 생기게 하는 방법)

<iframe> 사이즈가 pc, 태블릿, 다양한 휴대폰마다 사이즈를 변경하기 힘드니 비율을 유지하면서 영상 사이즈 그대로

조절 할 수 있게 하는 방법을 알아보자.

 

갤럭시 폰에서는 정사각형으로 잘 보이는데 다른 휴대폰에서는 유튜브 사이즈가 맞지 않아서 검은 띠가 생긴다.

이럴 때는 영상의 비율 그대로 유지하는 방법이 있다.

 

<div id="code">
	<iframe id="video" src="유튜브링크" />
</div>

 

id 값은 자유롭게 변경하고

src에는 유튜브 링크를 넣으면 된다.

 

#code{
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 정사각형 */
    padding-bottom: 56.25%; /* 16:9 비율 */
}

#video{
    position: absolute;
    width:100%;
    height:100%;
}

 

padding-bottom 값은 자유롭게 변경하면서 영상 사이즈에 맞게 조절해서 하면 된다.

그럼 부모 width 크기에 따라 비율이 유지되면서 iframe 영상의 비율은 깨지지가 않는다.