키스세븐지식
[아이프레임 가로 세로 비율 - iframe 크기 자동 조절]
iframe 크기 자동 조절하기
유튜브 등의 공유 방법이 아이프레임이기 때문에, iframe을 사이트에 넣을 때 알아두어야 할 것이 아이프레임 가로 세로 비율 자동 조절 방법입니다. 그러나 iframe의 속성 자체에 있는 기능을 사용하는 것이 아니라 꼼수를 이용하려고 합니다.
웹사이트를 개발하다 보면 아이프레임을 이용해서 외부 컨텐츠를 가져오게 되는데, 문제는 유튜브 등의 아이프레임 공유 코드를 딸 때 이미 크기가 정해져 있다는 것입니다. (iframe 가로 세로 크기가 공유 코드 속에 들어 있음)
유튜브 같은 경우 일반적으로 아이프레임 가로 세로 비율은 560px, 315px입니다. 약 16대 9의 비율을 보이는데, 그대로 홈페이지 제작에 사용하게 되면 아이프레임 고정 크기로 인해 디자인이 한정되게 됩니다.
예를 들어 PC버전의 가로길이가 800px인데 모바일 버전이 360px라면, 한쪽에 크기를 맞추면 다른 쪽에서 보기 나쁜 크기가 된다는 것입니다. 유튜브 아이프레임 가로 세로 비율을 그대로 써도 문제고 한쪽에 맞춰도 문제입니다.
이럴 때 쓰는 iframe 크기 자동 조절 방법은 반응형 홈페이지에서도 꽤나 유용하게 써먹을 수 있는 방법입니다. 즉, 아이프레임 가로 세율 비율을 맞추기 위해서 다른 DIV로 가두어 버리는 것입니다.
<div class="iframebox">
<iframe src="동영상주소" frameborder="0" allowfullscreen></iframe>
</div>
위의 코드를 보면 iframe 크기가 자동조절되도록 div가 밖에서 감싸고 있습니다. 이 코드가 아이프레임의 가로 세로 비율이 일정하도록 유지하면서도 크기가 자동 조절되게 만드는 해결방법인 것입니다.
아이프레임 가로 세로 비율 정하기
이번에는 CSS파일로 HTML에 입력된 iframebox의 크기와 속성을 지정합니다.
.iframebox {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.iframebox iframe {
position: absolute;
width: 100%;
height: 100%;
}
CSS 파일에서 속성을 지정할 때 relative와 absolute로 두어서 아이프레임이 div 안에서만 돌아다니도록 설정했습니다. 바깥의 div의 크기가 이미 정해져있으므로 아이프레임은 그 안에서만 100%가 되면 되는 것입니다. 그리고 iframe 크기 자동조절을 위해 무조건 100%로 지정하였습니다.
중요한 부분은 div인데, div를 100%로 하고 세로는 따로 지정하지 않은 대신 padding-bottom을 56.25%로 두는 것입니다. 가로 크기를 전체에 맞추지만 세로는 지정하지 않으므로서 쓸데없이 div 때문에 생기는 공간을 만들지 않고 있습니다. 굳이 56.25%로 두는 것은 최근 동영상들의 비율이 영화비율인 16:9로 제작되고 있기 때문입니다.
여기서 padding-bottom:56.25% 또한 중요합니다. 아이프레임의 공간은 만들어줘야 하기 때문입니다. 이렇게 함으로써 아이프레임의 가로 세로 비율을 자동 조절할 수 있게 됩니다. 아이프레임은 div안에서만 크기가 결정되는 대신 전체 크기를 무조건 100%로 하여 최대 너비를 그대로 이용하게 하는 것입니다.
단, 이 코드를 HTML 파일과 CSS파일로 나눠서 적용할 경우 주의할 것이 있습니다. 유튜브 등에서 공유 코드를 복사해 붙일 때 width와 height 부분을 지워주는 것이 좋다는 것입니다. CSS파일이 먼저 읽어 들이게 된 홈페이지는 나중에 불러지는 iframe 가로 세로 비율을 따라가게 되므로 효과가 없기 때문입니다.
