iframe要素をスマホ対応させるには、レスポンシブ化がほぼ必須と考えてよいでしょう。特にYouTubeなどの動画を標準のサイズで表示させていた場合、スマホで表示させると画面からはみ出してしまいます。ただiframe要素のレスポンシブ対応を行う中でやっかいなことは、幅を可変させるのは簡単ですが、高さを可変させるのが難しいということです。

iframe要素の高さをアスペクト比を維持しながら変更させるにはテクニックが必要です。実装はCSSでも、JavaScriptでも行うことができます。それぞれの実装方法を紹介していきます。

「CSS」でiframe要素をレスポンシブ対応させる

まずは、CSSでiframe要素をレスポンシブ対応させる方法を説明します。CSSオンリーでもレスポンシブ対応させることができます。以下のYouTubeの動画はiframe要素となっています。これから説明するCSSでレスポンシブ対応させています。

HTML – iframe要素をラップする

HTMLの方では、レスポンシブ対応させたいiframe要素をdiv要素などでラップします。それぞれにclass属性などで名前をつけます。iframe要素はできたらサイズの指定をしておきます。

<div class="iframe-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xqviGwyy7y0?rel=0" frameborder="0" class="iframe"></iframe>
</div>

CSS – メディアクエリとパーセント指定

CSSに関してはメディアクエリを使って、通常のiframe要素の横幅のサイズ（ここでは560px）よりコンテンツの横幅が小さくなった時に、iframe要素とその親のラッパー要素のサイズをパーセント指定でサイズ変更するようにしています。

まず、iframe要素に関しては、幅も高さも「100%」で指定とします。そうすることで、横幅はコンテンツの横幅に合わせて可変するようになり、さらに高さに関してもアスペクト比を維持したまま可変するようになります。

.iframe {
  width: 100%;
  height: 100%;
}

次に、親のラッパー要素もiframe要素と同様に横幅を「100%」と指定して、コンテンツの横幅に合わせて可変するようにします。ただし、高さに関しては、%指定しても子要素のiframe要素の高さに合わせることができません（ラッパー要素の親要素の高さに依存するためです）。ここは裏技的にpaddingプロパティを使って高さを確保するようにします。

高さの取得にはCSS3の「calc関数」を使い、iframe要素の縦横比を計算して、ラッバー要素の高さに適用するようにしています。そうすることによって、ラッパー要素もiframe要素と同じアスペクト比を維持したまま伸縮するようになります。

.iframe-wrapper {
  width: 100%;
  padding: calc(315 / 560 * 100%) 0 0 /* topを0、bottomをcalc()としてもOK */
}

paddingプロパティで高さを作ったので、positionプロパティでiframe要素をレイヤー化してラッパー要素に重ねるようにします。すべてまとめるとCSSの指定は以下のようになります。

/* iframe要素内でサイズ指定している場合は必要なし */
.iframe {
  width: 560px;
  height: 315px;
}
/* CSSでレスポンシブ対応 */
@media screen and (max-width: 560px) {
  .iframe-wrapper {
    position: relative;
    width: 100%;
    padding: calc(315 / 560 * 100%) 0 0;
  }
  .iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

CSSでの実装方法は、以下のブログを参考にさせていただきました。

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

「JavaScript」でiframe要素をレスポンシブ対応させる

CSSでも上記の通り十分に実装することができます。懸念点があるとしたら、サイズの異なるiframe要素が複数同一ページ内にある場合です。その場合、それぞれラッパー要素をそれぞれ作る必要があって手間がかかります。

JavaScriptを使うと、iframe要素のサイズを気にせずに、複数のiframe要素を一気にレスポンシブ対応させることができます。今回は以下のjQueryのプラグイン「jquery.cb-iframe-size.js」を使った実装の方法を紹介します。

• maechabin/jquery.cb-iframe-size.js [詳細]

以下のiframe要素に設定したYouTubeの動画は、上記のCSSで実装した時と同じような挙動をしていますが、ここではjQueryのプラグインでレスポンシブ対応しています。

実装方法を説明します。実装はすごく簡単です。

1. jQueryプラグインをダウンロードする

まずは、以下よりjQueryプラグインをダウンロードします。zipファイルとなっているので解凍します。使用するファイルは「jquery.cbiframesize.min.js」となります。

• jquery.cb-iframe-size.jsをダウンロード

CDN版も用意しています。手っ取り早く使いたい場合は、以下をコピーしてお使いください。

2. 外部ファイルを読み込む

実装したいページにjQueryとダウンロードしたjQueryプラグインファイル「jquery.cbiframesize.min.js」」を読み込むようにします。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.cbiframesize.min.js"></script>

3. iframe要素の対応

対象のiframe要素に対して以下を行います。

• iframe要素に任意のid、class属性などを付与
• iframe要素内またはCSSにおいてiframe要素のサイズ（width、height）を指定

4. プラグインを実行

jQueryのセレクタで高さを変更したいiframe要素を取得して、jQueryプラグインの.cbIframeSize()メソッドを実行します。以下をbody要素の閉じタグの前に置きます。

<script>
$(document).ready(function () {
  $(".iframe-class").cbIframeSize();
});
</script>

以上で、iframe要素の幅と高さの値がコンテンツの幅に合わせて可変するようになります。

まとめ

このように、CSSでもJavaScriptでも、iframeのレスポンシブ対応を実現することができます。それぞれ長所、短所あると思います。JavaScriptで実装した方が簡単ではありますが、CSSの方がパフォーマンス的には良いとか。いろいろ試しながら使い分けてもらえればと思います。

iframe要素以外ももちろんスマホ対応する必要があると思います。以下のGoogleのモバイルガイドが大変参考になると思いますので、最後に紹介しておきます。

• ウェブマスター向けモバイルガイド – Google Developers

それから、以下の当ブログの記事もぜひ参考にしてみてください。

• ブログのレスポンシブ対応方法。スマホ最適化したその日からモバイル経由のアクセスが急増！