iframe 요소를 반응형으로 만들기

html5에서 추가된 <video> 태그는 영상 요소를 자유롭게 삽입할 수 있도록 한다. 그러나 youtube나 vimeo와 같은 외부 영상 서비스를 삽입할 때는 <video> 태그를 사용하지 못하고 해당 사이트에서 제공하는 소스를 사용하는 경우가 많다. 이 경우 제공되는 소스는 주로 <iframe> 태그로 작성되어 있는데, 제공되는 소스를 사용하는 경우 영상 사이즈가 고정되어있어 반응형에 유연하게 대처할 수 없다는 단점이 있다. 따라서 <iframe> 요소의 width, height를 조정하기 위해서는 약간의 트릭이 필요하다.

iframe 감싸기

<video> 태그는 따로 영상을 감싸주는 요소가 필요하지 않지만 <iframe> 태그를 사용해 가져온 영상은 반응형에 대응하기 위해 감싸주는 요소가 필요하다. 이 감싸주는 태그(대개 div)가 <iframe>의 기준이 되기 때문에 영상 사이즈를 유동적으로 조절하려면 감싸주는 요소가 반드시 필요하다. 아래 태그는 영상을 16:9 사이즈로 삽입하기 위한 태그이다.

<div class="iframeContainer iframe16To9">
  <iframe src="https://www.youtube.com/watch?v=qwB_fMR4KD0" allowfullscreen></iframe>
</div>

이렇게 감싼 <div> 요소에 포지션으로 relative를 주고 내부에 있는 <iframe>에 absolute를 줘서 iframe이 div의 크기에 영향을 받도록 width와 height를 100%로 준다.

.iframeContainer {
  position: relative;
  width: 100%;
}
.iframeContainer iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

이렇게 되면 <iframe> 요소는 <div>의 크기에 영향받는 상태가 된다. <div> 요소는 <div>를 싸고 있는 <figure>의 width만큼 움직이게 하기 위해 100%를 준다. 여기까지 하면 iframe 요소는 100%의 width를 가지게 되는데 여기에 height를 100%를 줘도 크기만큼 가지지 못하기 때문에 height를 0을 주고 대신 padding-top(or padding-bottom)을 줘서 영역을 확보해 iframe 요소가 전체 사이즈만큼의 크기를 차지할 수 있게 한다.

height를 0을 주는 이유는 예외상황을 없애기 위해서이다. 어떤 브라우저, 어떤 사이즈로 접근하더라도 동일한 사용자 경험을 제공하기 위해 height를 0을 주는 것이다.

이때 div 요소가 16:9의 비율을 갖거나 4:3 비율을 가져도 대응할 수 있도록 iframe16To9 혹은 iframe4To3이라는 클래스를 줘서 어떤 비율을 선택하는지에 따라 클래스를 다르게 줄 수 있도록 한다. 때문에 iframe을 싸고 있는 요소인 div에 height를 0, padding-top을 비율만큼 줄 수 있지만 그렇게 하지 않고 클래스를 분리해 .iframecontainer에는 height를 0, .iframe16To9에는 padding-top을 9/16*100(결과값 56.25%)을 준다.

.iframeContainer {
  position: relative;
  width: 100%;
  height: 0;
}

/* 16:9 */
.iframe16To9 {
  padding-top: 56.25%;
}

/* 4:3 */
.iframe4To3 {
  padding-top: 75%;
}

.iframeContainer iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

정리

1. <iframe> 요소를 반응형으로 유연하게 출력되게 하기 위해서는 기준이 되는 <div> 요소가 부모 요소로 필요하다.
2. <iframe> 요소의 width와 height는 각각 100%를 주고, <iframe> 요소를 감싸고 있는 <div> 요소는 width는 100%, height는 0을 준다.
3. <div> 요소에게 줄 화면 비율에 따라 padding-top을 퍼센트로 적용한다. (ex. 16:9인 경우 9/16*100%)