title: Proportionally resize an IFRAME containing html with flash content in a responsive design
body: <p>i have a responsive design with an IFRAME having an html file with flash content inside.</p>
  
  <pre><code>&lt;iframe width="800px" height="600px" frameborder="0" align="middle" class="iframeStyle" src="linkToHtmlWithFlash.html"&gt; &lt;/iframe&gt;
  </code></pre>
  
  <p>Now i need to resize the IFRAME and its containing flash proportionally as the window width changes.</p>
  
  <p>I have tried it with the combination of <code>media query</code> and <code>transform:scale</code> like this</p>
  
  <pre><code>@media (max-width: 767px){
   .iframeStyle {
      transform: scale(0.74);
      transform-origin: 0 0 0;
  }
  }
  @media (max-width: 979px) and (min-width: 768px) {
   .iframeStyle {
      transform: scale(0.9);
      transform-origin: 0 0;
  }
  }
  </code></pre>
  
  <p>But this method not seems to be so good where it will resize only when the cutoff is reached.</p>
  
  <p>Any solution using jquery or pure CSS?</p>
  
  <p>Is there any solution using pure CSS or jQuery.</p>