iframe要素のレスポンシブWebデザイン対応

レスポンシブWebデザインでiframe要素のサイズ比率を維持した状態で縮小させる方法を紹介します。

 

(1) iframe要素にdiv要素（親）を囲む
(2) 親、iframe要素にpositionプロパティを指定、親にはrelative、iframe要素にはabsolute
(3) 親の要素にpadding-topプロパティ（bottomでも可）に画面比率を算出して指定

 

※画面比率の算出方法
16:9の場合（横幅は100%）
100 / 16 9 = 56.25%
4:3の場合（横幅は100%）
100 / 4 3 = 75%

 

デモ（リンク）
※デモは4:3の場合です。

 

CSS

.iframe-content {
   position: relative;
 width: 100%;
    padding: 75% 0 0 0;
}
.iframe-content iframe {
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
}

 

HTML

<div class="iframe-content">
 <iframe src="http://www.youtube.com/embed/xTjejvnBJfU?rel=0" frameborder="0"></iframe>
</div>

 

・複数カラムでの表示の場合
CSS

.iframe-content-wrap {
   display: -webkit-box;
   display: box;
}
.iframe-content-block {
   -webkit-box-flex: 1;
        box-flex: 1;
}
.iframe-content {
  position: relative;
 width: 100%;
    padding: 75% 0 0 0;
}
.iframe-content iframe {
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
}

 

HTML

<div class="iframe-content-wrap">
    <div class="iframe-content-block">
      <div class="iframe-content">
            <iframe src="http://www.youtube.com/embed/xTjejvnBJfU?rel=0" frameborder="0"></iframe>
      </div>
    </div>
    <div class="iframe-content-block">
      <div class="iframe-content">
            <iframe src="http://www.youtube.com/embed/xTjejvnBJfU?rel=0" frameborder="0"></iframe>
      </div>
    </div>
</div>