I'm trying to load an external site into an iframe. This external site adjusts perfectly to the viewport when loaded in a browser. However, when loaded in an iframe, the content does not adjust to fit the iframe's width.
Here is my HTML snippet:
<iframe height="500" width="100%" style="height:500px;width:100%" src="<external URL"></iframe>
Please note that I don't have control over the external site. But since that site already adjusts to the browser's width when loaded independently, then I'm thinking that I just need to be able to tell the content to use the iframe's width. Any suggestions on how achieve this?
Thanks!
Related
I need the material, specifically the content of another page, to be loaded into the iframe and the iframe window must automatically set a new height after changing the content in this window.
I have this code to paste in the iframe:
https://demo.phpjabbers.com/1676400046_556/preview.php?cid=1&switch=1&multi=1&theme=theme1
On the page I use this code:
<iframe src="https://demo.phpjabbers.com/1676400046_556/preview.php?cid=1&switch=1&multi=1&theme=theme1" width="100%" height="700px" style="border:none;overflow :hidden"></iframe>
What needs to be done to make it work? The solutions provided here on the forum so far do not work in 2023.
view address:
https://taxigoldap.pl/taxi-online2
please help.
I would like to add an iframe in which to display some other site that I don't have editing access to.
The other, embedded site, isn't responsive-designed at all.
Is it possible to influence the embedded site that's on the iframe using CSS to make it responsive?
No, it's not possible, because that site will have hard-coded width/height values and reducing iframe size will be same as resizing your browser.
I'm using media queries to scale an <iframe> based on screen resolution: the iframe and its contents get smaller, as the screen gets smaller. Now, this seems alright on paper, but for some reason, as the iframe's size decreases, it clips part of the content. I've tried going to the source file, and using media queries there, in hopes that the <iframe> would also include those; to no effect.
Is there any way to scale, or resize, the contents of an <iframe>, using CSS media queries, without resizing the iframe itself?
There is no possible way to style any of the content within a iFrame, because it is pulling content directly from somewhere else and is not taking anything from your site into account.
If you are just trying to grab a few things from a page maybe you should look into PHP.
Is there a way to adjust this? So basically the resolution of the page can be based on the dimensions you give the iFrame?
For example, if I said :
<iframe src="http://www.abigpage.com" height="500" width="500"></iframe>
And "www.abigpage.com" had content that was 1000x1000, could you adjust it so it showed up as 50% of its original size to fit the iFrame? I suppose I could set the called page's CSS properties to percentages and that may work, but is there a way to specify this no matter what?
This will only work for IE :(
yourIframe {
zoom:50%;
}
If it's on the same domain you can have a look here:
http://sonspring.com/journal/jquery-iframe-sizing
Else: due to the security limitation, no you can't edit/resize the content of the iFrame.
Hi guys I'm looking to resize an iframe depending on size of the browser window, but I'm all turned around as too the height and width. Would REALLY appreciate some explanation on where I'm confused.
I understand how to use css media queries use diff stylesheets according to screen size, but how does this apply to an iframe that's located on another website when I have to predefine the height and the width inside the iframe?
Do you even need the height and width to be defined inside the iframe? Or can you use media queries to detect the size of the browsing windows containing the iframe and then set the height and width values depending on that.
For instance is what's normally in the iframe, but how would I get the iframe to be something like if the other website is brought up on an iphone?
Or am I missing something?
Try setting your iframe height/width to a percentage. Like:
<iframe height="100%" width="100%"></iframe>
That will cause the iframe to expand to it's maximum possible size depending on its parent container.