iframeレスポンシブのコピペサンプル。アスペクト比も維持

GoogleマップやYouTubeなどのiframeタグを、レスポンシブでいい感じに表示されるようにします。スマホで幅がはみ出てしまってお困りのかたに。

サンプル

具体的には、本記事ではこのような表示になるサンプルを紹介します。パソコンだとサイトの幅に対して50%。タブレット以下では100%の幅に切り替わるようにします。ブラウザのウィンドウ幅を伸び縮みさせて確認してみてください。

HTML

HTML側はこうなります。divタグを２重にして、その中にGoogleマップ、YouTubeなどからコピーした埋め込み用のiframeタグを入れます。

divタグはそれぞれ、iframeWrap-parentとiframeWrap-childっていう名前にしてみました。ちなみに生成されるiframeタグ内のwidth、heightはデフォルトのまま、いじらなくて大丈夫です。

CSS

そして、ふたつのdivタグとiframeタグそのものにCSSを当てていきます。

なお14〜16行目で、タテヨコ比（アスペクト比といいます）を好みで調整出来るようにしてみました。サンプルのままだと一番下の16:9が適用されますので、適用させたい比率以外を消すなりしてお使いください。