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.
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'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!
I am still an HTML5 rookie and so far I got something up that's pretty snazzy. I found a template over on HTML5UP which I have been tinkering with, changing the CSS and taking out parts I didn't need, as well as added a couple of things myself.
Now, I wanted to show some images in a gallery, which I have achieved. It works pretty good on mobile too. The other thing I wanted to show, was my YouTube channels playlist, embedded using iframe. On the desktop it looks just fine, but on mobile it breaks the site when viewing the page vertically. I would like to know if there is a way to force the iframe to resize because of a phone screen or if I have to maybe go in another direction with this? (Like using the Video and Audio libraries in JavaScript).
If you can give your code that would be helpful, however I believe this is what you are trying to achieve?
Just give your iframe width a percentage instead of a pixel number. However I recommend you change the height as well, as you can see it looks funny at certain widths.
<iframe width="100%" height="315" src="//www.youtube.com/embed/ep7W89I_V_g" frameborder="0" allowfullscreen></iframe>
I also suggest you read the documentation on media queries.
I am a beginner in ExpressionEngine (and other code languages for that matter). Anyways, I am creating a video tutorial site, I have my expression engine site set up so I have categories in one channel. These categories filter content to the corresponding page. However, I want my site to have a featured video, which will be the newest posted video. Once I publish a new video, I want it to take the main stage and push the previous video to a smaller size. I am using Vimeo as a video host so all videos will be on Vimeo.
Here is my code in my main page for sorting new from old content
{exp:channel:entries limit="10"}
<div class="main_feature">
{if count==1}
<div class="video_large">
{/if}
{if count !=1}
<div class="video_small">
{/if}
<h2>{video_tutorial_title}</h2>
{video_tutorial_link}
{video_tutorial_summary}
</div>
{/exp:channel:entries}
I have them filtering to two different styles. My CSS looks like this...
.video_large {
height: 960px;
width: 640px;
}
.video_small {
height: 180px;
width: 320px;
}
When entering my new content/videos. I have been using the embed code from each video and removing the height and width from them thinking the div would then resize it. It looks as if it resized all the videos to 180x340 but for the newest video it looks like it created a 640x960 div, the video just doesn't fill the entire div. I am hoping I won't need any plug ins or anything like that. I am hoping its just something basic I am overlooking. Any help is greatly appreciated. Thank you!
There is a jQuery solution for this called FitVids. It's made for sites which use fluid design, but it should work in this case just as well. It resizes any videos within your targeted container (in your case .main_feature) to fill their parent container's width.
You then can also remove the height declarations from your CSS (so that you can accommodate videos with different aspect ratios).
Without seeing your page it's hard to tell, but I think you have to set the width and height of the embed iframe to 100% and then it should work.
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.