Resize <iframe> so that whole content just scales down or up

Question

I read so many posts about iframe resizing and so on, but I didn't find a solution

Problem : I want to make a webpage in iframe tag to be shown so, as is it - I mean,if we resize the main webpage where the tag is ,the embedded webpage has to be just scaled in or out (automatically) without losing parts of its content. Currently I need a 750x450 webpage(consisting only of a backgroung picture and some interactive buttons on it) that has to be shown in another webpage.Scrolling has to be off.

I would be glad to hear your suggestions on how to cope with this problem. Thank you !

Answer 1

Option 1

With Bootstrap 3.2 you can wrap each iframe in the responsive-embed wrapper of your choice:

http://getbootstrap.com/components/#responsive-embed

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

Option 2

If you don't want to wrap your iframes, you can use FluidVids https://github.com/toddmotto/fluidvids. See demo here: http://toddmotto.com/labs/fluidvids/

   <!-- fluidvids.js -->
    <script src="js/fluidvids.js"></script>
    <script>
    fluidvids.init({
      selector: ['iframe'],
      players: ['www.youtube.com', 'player.vimeo.com']
    });
    </script>

Responsive iframe using Bootstrap

Answer 2

just try this code, you need to set width and height in terms of percentage ,then whatever screen it is it will fill up , to disable scrolling just make it "NO".

your code will probably look like :

<iframe name="myIframe" id="myIframe" style="position:fixed;margin-top:0px;width:100%;height:100%" frameborder="0" src="another.html" scrolling="no" runat =server></iframe>

paste this code in main.html or whatever , and use another page as iframe page.

check demo http://freebits.gq