Resizing iFrame with 100% Height

This solution is courtesy of Michael Lancaster. The original solution appears on his blog in the article Fluid iframe with use of javascript.

  1. In Source, wrap your iframe in a div with the class "fluidMeida". Here's what that would look like: 
    <div class="fluidMedia">
        <iframe frameborder="0" height="100%" scrolling="no" src="http://www.knowledgeowl.com/" width="100%"></iframe>
    </div>
  2. Copy and paste the following style block into the article source. If you are using this code in multiple articles, you might want to add the styles to your Custom CSS instead. 
    <style type="text/css">
    .fluidMedia {
        position: relative;
        padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }
    
    .fluidMedia iframe {
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%;
        height: 100%;
    </style>
  3. Save and watch the magic!