Site icon Tips Note by TAM

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>