Responsive iframes

Here is a simple CSS solution for responsive iframes, under the conditions that it is acceptable that the iframe width is fluid (100% of its container) and the height is within a given range (e.g., minimum 480px, maximum 800px).

  1. First, remove the "width" and "height" tags from your iframe, if it has them (common when choosing an "embed" option from Google and other sites).
  2. Give your iframe the class "responsive-iframe".
  3. Then use CSS as follows:
        <style type="text/css">
        .responsive-iframe {
          width:100%;
          max-width: 100%;
          height:100%;
          min-height:480px;
          max-height:800px;
        }
        </style>
    
        <iframe src="YOUR-IFRAME-SRC-URL-HERE" class="responsive-iframe"></iframe>
        
  4. Change "min-height" and "max-height" to suit your own tastes.

Although the iframe will resize if you resize your browser window after the page loads, if you are using a Google map you may need to refresh the page to re-center the map correctly.

← Home