Calculator & Recorder

Iframe은 높이와 너비가 딱 고정되어 있어서 반응형으로 만들기 쉽지 않습니다. 하지만 CSS Position의 힘을 빌리면 커다란 모니터에서도 Iframe을 커다랗게 보여줄 수 있습니다. 한번 도전해봅시다.

Iframe을 감싸는 div 만들기

Iframe을 감싸는 div를 만들고 클래스나 아이디를 부여합니다. 저는 iframebox라는 클래스를 부여했습니다. Iframe의 width와 height 속성은 모두 제거해야 합니다.

<div class="iframebox">
  <iframe src="https://www.youtube.com/embed/ZuT3xYLW7vA" frameborder="0"></iframe>
</div>

CSS로 스타일링하기

CSS로 다음과 같이 스타일링합니다. iframebox는 자신이 부여한 아이디나 클래스에 맞게 변경하세요.

.iframebox {
  position: relative;
  padding-bottom: 56.25%;
}

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

여기서 가장 중요한 부분은 padding-bottom입니다. 이 부분은 Iframe의 너비에 비해서 높이가 비가 얼마나 될지 결정합니다. 너비가 16이 된다고 하면 9×16÷100=56.25이므로 16의 56.25%는 9가 돼서 16:9 비율의 영상이 완성됩니다.

예시

각 예시마다 소스 코드를 올려놓겠습니다.

니코니코 동화 영상 (16:9)

<div class="iframebox"><iframe frameborder="0" src="https://embed.nicovideo.jp/watch/sm11269476"></iframe></div>

유튜브 영상 (16:9)

<div class="iframebox"><iframe src="https://www.youtube.com/embed/ZuT3xYLW7vA" frameborder="0"></iframe></div>

유튜브 영상 (9:16)

이 Iframe은 따로 padding-bottom 177.7778%을 주었습니다. 9의 177.7778%가 16이 되기 때문에 9:16 비율의 영상이 완성됩니다.

<div class="iframebox" style='padding-bottom: 177.777777778%'><iframe src="https://youtube.com/embed/TcHvEFxk_78" frameborder="0"></iframe></div>