HTML5 iframe: Respond to Responsive Web Design

Other language site
ja ja
Google Translate
  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
HTML5 Logo

An iframe tag to use when embedding GoogleMap or YouTube.

This is a way to respond to Responsive Web Design.

After modifying the HTML a bit, CSS can handle it.

Add box to iframe tag

In order to automatically generate the size of an iframe, create a box enclosing the iframe with the div tag.

<div>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12962.48172155079!2d139.75586937791607!3d35.68634706791085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1505738394779" width="600" height="450" style="border:0" allowfullscreen></iframe>
</div>

The code is displayed below.

When this is displayed with the development tool of the browser and the smartphone, the side will protrude.

We will respond to Responsive Web Design by designating CSS.

CSS designation

This time, I directly designate CSS in html statement.

<div style="position: relative; width: 100%; padding-bottom: 75%;">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12962.48172155079!2d139.75586937791607!3d35.68634706791085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1505738394779" width="600" height="450" style="border:0" allowfullscreen="allowfullscreen"></iframe>
</div>

By setting the iframe to "position: absolute;" and div to "position: relative;", the iframe is contained in the div.

The criterion of iframe is set to "top: 0; left: 0;" to the upper left.

Leave the size of the iframe to the div element by setting "width: 100%; height: 100%;".

The size of the iframe is automatically determined by "div: width: 100%; padding-bottom: 75%;" of the div.

"width: 100%;" extends the width of the iframe to the width of the parent element.

This automatically determines the size according to the screen size.

"padding-bottom: 75%;" determines the height of the iframe to 75% of the width of the parent element 's width.

Of course the size is automatically determined by the width.

padding-bottom: 75% is calculated as aspect ratio 4: 3.

If you set the aspect ratio to 16: 9, it will be 56.25%.

padding-bottom can be replaced with padding-top.

The code is displayed below.

 

When this is displayed in the browser development tool or smartphone, the size is automatically changed.

SNS also distributes articles.
Leave a Reply

*

If you like this article, share it!