iframe要素のスマホ対応 – CSSとJavaScriptそれぞれのレスポンシブ対応方法

先日Googleは、ウェブマスター向け公式ブログの「検索結果をもっとモバイル フレンドリーに」という投稿にて、Googleでは、4月21日より、ウェブサイトがモバイルフレンドリーかどうかをランキング要素として使用し始めますといった発表をしました。この発表を受けて、Webサイトのスマホ対応を行い始めた方も多くいることでしょう。その中で意外と大変なのがiframe要素の対応だと思います。YouTubeの動画などをサイトに掲載している方も多いんじゃないでしょうか。動画はちゃんとスマホ対応しないと、スマホの画面からはみ出します…。これは全然モバイルフレンドリーではありません。今回は、そのiframeのレスポンシブデザインによるスマホ対応方法を紹介します。

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

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

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

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

Design for a Mobile Mind

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での実装方法は、以下のブログを参考にさせていただきました。

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

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

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

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

Design for a Mobile Mind

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

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

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

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

https://cdn.rawgit.com/maechabin/jquery.cb-iframe-size.js/master/jquery.cbiframesize.min.js

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)を指定
<iframe src="//example.com/" width="600" height="200" class="iframe-class">

4. プラグインを実行

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

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

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

このjQueryプラグインは私の自作のプラグインとなります。何かあれば、こちらのコメント欄でもよいのでお知らせいただけますと幸いです。

まとめ

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

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

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

スポンサードリンク

コメント一覧

  1. cssの書き方で困って検索すると目的に合致したページとして表示されるので頻繁にお世話になっています。
    フルHDの画面を縦置きで使ってこのサイトを見ているのですが、ブラウザのウィンドウがちょうどその横幅1080px〜少し狭いあたりの時にスクロールするとレイアウトが盛大に崩れて殆ど読めなくなります。幅を縮めれば良いというのはありますが気になりましたのでお知らせしておきます。

    通りすがり  返信

    • コメントありがとうございます。

      > ブラウザのウィンドウがちょうどその横幅1080px〜少し狭いあたりの時にスクロールするとレイアウトが盛大に崩れて殆ど読めなくなります。

      ちょうどレスポンシブのブレイクポイントになっているところですね。幅を縮めたり、リロードしていただければ治ると思いますが、やはり1080前後をブレイクポイントにするのは気をつけた方がよさそうですね。調整を検討します。

      Takanori Maeda  返信

  • 必須

コメント