title: How to fit iframe content with landscape orientation within device screen
body: <p>I have a webpage that I have set to have a landscape orientation on mobile devices within which I have placed an iframe. My problem is I cant get the iframe to fit within the mobile device screen while in landscape orientation (full width and height matching the device screen). How may I be able to achieve this?</p>
  
  <p>I am using CSS:</p>
  
  <pre><code>&lt;style&gt;
     body, html {
       margin: 0;
       padding: 0;
       height: 100%;
       overflow: hidden;
     }
  
     #content {
       position:absolute;
       left: 0;
       right: 0;
       bottom: 0;
       top: 0
     }
  
    #content iframe{
      width:100%;
      height:100%;
      border:none;
    }
  
    @media screen and (orientation:portrait) {
        body {
           -webkit-transform: rotate(-90deg);
           -webkit-transform-origin: 50% 50%;
           transform: rotate(-90deg);
           transform-origin: 50% 50%;
  
             }
       }
     &lt;/style&gt;
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;iframe src="localhost/iframeTest/index.php" 
        allowtransparency="true" frameborder="0" scrolling="no" 
        class="wistia_embed" name="wistia_embed" allowfullscreen 
        mozallowfullscreen webkitallowfullscreen oallowfullscreen 
         msallowfullscreen width="100%" height="100%"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>