レスポンシブにも楽々対応。iframeの埋め込みはiFrame Resizerで決まり！

iframeに魔法をかけるiFrame Resizerライブラリ

iFrameとiFrame Resizer

ホームページ作成時の要素（タグ）のひとつに、iframe（インラインフレーム）があります。

iframeとは、HTML内に別のHTMLを入れ子にすることができる要素です。

この要素はとても古く、またSEO的にもあまりよくないなど少しづつ下火になってはいるのですが、iframeにしかできない表現があることから、2020年現在HTML5でもサポートされています。

そのiframeですが、デフォルトでは高さが自動調節できなかったり、クロスドメインはサポート対象外だったりとレスポンシブがデフォルトの昨今ではなかなか使いづらい仕様。それを一瞬で使いやすくしてくれる魔法のライブラリが今回ご紹介するiFrame Resizerです。

と至れり尽くせり。

まずはiFrame Resizerのデモをご覧ください。

iFrameのサイズを自動的に変更するIframe Resizerのデモ
http://davidjbradshaw.com/iframe-resizer/example/

デモのリンクをクリックすると、iframeの変化に合わせてコンテンツサイズが自動で更新されるのがわかると思います。

これはたとえばタブレットやスマートフォンなど縦横可変デバイスでも、iframeが追随してフレームの高さと幅を確保することを意味します。素晴らしい。

ダウンロードしたファイルを解凍し、jsフォルダーに入っている

ファイルを使用します。

iframe-resizer用にCSSを追加

<style>
  iframe {
    width: 1px;
    min-width: 100%;
  }
</style>

iframeResizer.min.jsを設置

<script src="js/iframeResizer.min.js"></script>

iframe要素を記述

<iframe id="myIframe" src="https://your-iframe.html"></iframe>

IDが付いていることにご注意ください。

iframeResizer.contentWindow.min.jsを設置

<script src="iframeResizer.contentWindow.min.js"></script>

親ページ（ホストしているページ）に記載します

<script>
  iFrameResize({ log: true }, '#myIframe')
</script>

これだけでiframeがレスポンシブ、クロスデバイス、クロスドメイン対応になります。とても簡単。

iFrame ResizerはjQueryの依存なく単体で動くのであらゆる場面で効力を発揮します。とくに楽天市場やYahoo!ショッピングのサイト構築では、非常に重宝するライブラリだと思います。

現在も開発されている上、GitHubにはさまざまなトラブルシューティングやIssuesでの問題解決方法も載っているので、iframeを使用する場面では本当にオススメのライブラリです。