Load a website in iframe in desktop view

Question

I am working on a preview of a particular website that I am working on in backend.

<div class="tab-pane" id="preview_site">
                    <iframe id="site_previewer" src="path/to/website" style="width:100%;height:600px;"></iframe>
                </div>

This is the iframe. The problem is website loads in tab view and not desktop view. Using the current width available, I want to load the website in desktop view. Manipulating with the width does the job, but also the iframe goes out of the browser window. How can I do that?

If you're loading the frame content from the same domain where you're going to display the iframe, have a look at this. I'm using it and it's working absolutely well...https://github.com/davidjbradshaw/iframe-resizer — Nick, Feb 19 '15 at 10:22
You may want to take a look at this: http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe — Babak, Feb 19 '15 at 10:28
@BabakT: The problem lies when I change the width to 1280px. The frame goes out of the specified container. And the width of the container is 960px. — nirvair, Feb 19 '15 at 10:36
I got your point from your question, try to scale down the content size so you will have the expected content (desktop view) in smaller width size which will fit in your limited 960px size. — Babak, Feb 19 '15 at 10:52

nirvair · Answer 1 · 2015-02-19T11:23:08.193

This is how I got the solution

<div class="tab-pane" id="preview_site">
                    <div class="preview_wrap">
                        <iframe id="site_previewer" class="frame_wrap" src="path/to/website/" ></iframe>
                    </div>
                </div>
<style type="text/css">
    .preview_wrap {
    width: 100%;
    height: 800px;
    padding: 0;
    overflow: hidden;
}
.frame_wrap {
    width: 1280px;
    height: 786px;
    border: 0;
    -ms-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
</style>

Load a website in iframe in desktop view

1 Answers1