iWeb Tip #2 – iFrames in iWeb (Websites within Websites)
This page lets you load another webpage (whether made in iWeb or not) into your site. Very helpful if you have a page made somewhere else and want to put it directly onto your webpage. Some things you might want to iFrame on your page are:
- iCal published calendars
- Aperture made photo galleries
- Pages made in 3rd party web software such as RapidWeaver, DreamWeaver, Sandvox, etc.
- HTML Flash Galleries with XML files
- and many more
Here’s how to do it:
Full iFrame:
1-Copy the code below by doing a triple click and then pressing (command + C)
<IFRAME SRC = "https://www.iwebunlimited.com" WIDTH="600px" HEIGHT="425px" FRAMEBORDER="0" --if "0" no border, otherwise "1" with border MARGINWIDTH ="0px" MARGINHEIGHT="0px" SCROLLING="auto" --"no" no scrolling bar, "yes" show always, "auto" showed when need > Your browser does not support IFRAME </IFRAME>
2-Paste into an HTML Snippet in iWeb
3-Replace the items highlighted in red in the code. First the website that you want to display in your page, second the width and height of the site. If your not sure the width and height, just enter some values and keep changing it till your page fits. You also have some option to have a frameborder, margin, and scrolling. For scroll bars you can put in yes or auto (auto will auto detect if you page needs scroll bars or not).
Partial iFrames:
There are times when you only want to iFrame portions of a site. This code will help you do that.
1- Copy the code below into an HTML Snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""https://www.w3.org/TR/html4/loose.dtd"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"><!--#container{width:340px;height:290px;border:0px solid #000;overflow:hidden;margin:auto;}#container iframe {width:670px;height:1200px;margin-left:10px;margin-top:-560px;border:0 solid;}--></style></head><body><div id="container"><iframe src="https://www.iwebunlimited.com"; scrolling="no"></iframe></div></body></html>
2- Then you need to modify the items in red to get the portion of the site you want to iFrame in iWeb. What is going on here, is we have the container size, then we have the iFrame size, the we have where on the page the container is located using the left and top margins.
How I’d recommend going about this is to first put in the URL of the site your iFraming in the last item highlighted in red, then hit apply in the snippet. Now we just need to modify the sizing to show the portion of the iFrame you want to show.
3-Let’s size your iFrame dimension. So to size your iFrame dimensions in correctly, first put in the width and height that the actual page your iFraming in is. A quick way to do this is to visit your actual page your iFraming in and press Command + Shift + 4, you’ll then get a cross hair instead of your arrow for your mouse. This is ordinarily how we take screenshots of items on our screen, but we are using it just to get the dimensions of our site. You see when we drag our mouse in this mode (in Snow Leopard & Leopard OS only) you’ll see dimensions in pixels of how large the area is. Once you have your width and height dimensions by dragging your mouse in this mode hit the escape key on your keyboard before letting go of your mouse button, that way you won’t actually take a screenshot and we can just take the info that it gave us in the width and height pixels to enter into our iFrame snippet here.
4- Then adjust the container size. Adjust the container width and height to be the size that you want to show of the iFramed site.
5-Then use the margin-left and margin-top to move the container around the iFramed page so that the container is located in the spot you want.
You should now have an iFrame that only shows the portion of a site that you want to be shown. Yay! Don’t you love little tricks like this in iWeb! Hope that helped.
If this tip helped you, consider donating to the iWebUnlimited cause by clicking below;
[iWeb-Code=’donation’]
Jason –
Thanks for the great site! It’s so helpful.
I am SO CLOSE to getting this to work, but the final step isn’t working for me.
I created my movie, used Adobe Media Encoder to turn it into a .flv, launched Flash CS4, followed all of the instructions in your video tutorial to create the .html, .swf and the preview.jpeg files. (I chose no skin, but selected ‘true’ for autoplay under the Component Inspector). I published settings, transferred the four files to my server in a file called flashplayer and can even view my video successfully when I double click on the index file.
Problem is, I cannot get it to play in iweb. Both in iweb format and when I publish the files and try to view on the web, I just see black. When I use my browser to access the index file, it plays for me just fine.
I tried adding a skin, but when I do, all I see is the skin and although I can see the play button, I cannot touch it. I made sure that the HTML widget was moved to front, but no luck.
Help!? What am I doing wrong?
What I really want is just to have the video play and loop without any control by the user. (In Publish Settings menu, I did make sure that the ‘loop’ box was checked.)
Thanks so much!
Alison
I just started using iWeb 9 and am also a bit of a novice at html & CSS. I looked at a number of postings on adding drop down menus to iWeb and yours is by far the most informed and easiest to follow. I succeeded in creating a dropdown on my iWeb page however when I click on the submenus the target opens inside the frame on my iWeb page rather than opening in a new window – I rechecked the steps on your video tutorial and all is ok. Did I miss something??
Thanks for your assistance.
David
David, be sure that all your links have the target=”_parent” and all your links should work.
Hi, love your website, it’s been my go-to since I started on my website. About iFrames, I want any links inside the iFrame to load on the main page (not on a new browser nor in the iFrame, but on the same one where the iFrame is embedded). You mentioned target=”_parent” in one of your replies, but I don’t know where and how..this one doesn’t seem to work: . Could you explain this more?
Thanks! Such a great site, I wouldn’t know what to do without you!
I tried this and it didnt work:
I’ve been looking online and it always adds this attribute to but it’s not in the code you provide?
grr…cant get this right…what im trying to type is this <iframe src="somewebsite" target="_parent"; scrolling…
Alison, there could be many many variable that’s causing the problem. Maybe post the URL of the page that’s causing you problems and we could possibly point out where the problem is.
Thanks …. left out a few quotation marks – fixed that and now working great!
It works great but when i publish it the website makes a pop=up of the website i put in iframe. how can i make it not pop up?
First of all: THANKS SO MUCH! iwebunlimited is really great! And it worked out fine to integrate the flash video in iweb. The only small problem left is that my preview picture is not showing up. Since i told the skin to hide automatically & my page background is black, you can just guess that there is a movie somewhere, hmm.. In your html code no preview image is mentioned, is that causing it? I have no clue how to integrate it in the code, can someone help me please?
That doesn’t sound like an iFrame issue, maybe shoot that over to the forums.
hey, thanks for this great help ;-)
on more thing ;-) please can you tell me if is possible to indicate only a part of an website? i try it but it was nor possible for me!
i mean like the webclips you can make in safari! is it maybe possible to take the webclips?
greatings from germany and sorry for my bad englisch ;-)
drasch
Drasch just updated the post with code to do partial iFrames. That should help you out.
Is there any way to dynamically re-size the iFrame depending on the content? My iFrame contains a link to a new page… the first page that will show up in the frame is 600px (height) and then when you click the link the new item is 835px (height) (width remains the same). Is there any way for it to automatically re-size when you click the link?
There actually isn’t, I would suggest setting your iFrame for the largest size the iFrame page may show. If you have control of the actual pages your iFraming I’d adjust them accordingly.
Dear Jason, thanks so much for your tutorials.
I want to embed a webgallery, created in bridge cs4, into an iFrame. it works well when published to a local folder. but the page is blank when published to my server.
do you have any suggestion what could be the reason?
thanks,
gertrude
It’s hard to help trouble shoot it without seeing anything. Maybe publish the page your having problems with and post your URL.
How do I make my menu buttons change the content in the iframe?
thanks
I am using a blogger site and I have a drop down link list I want to use on multiple pages. The problem is that if I need to update the link list I am having to do it for every post. Is their a way to make this list into a iframe or something and just have it in one post. That way if I need to update the list for 100 post I can just update it in one post and it will update the rest itself.
This is the link list code I am using
NAME OF ANIME
Episode 01
Episode 02
Episode 03
Episode 04
Episode 05
Episode 06
Episode 07
Episode 08
Episode 09
Episode 10
I did not publish the code I posted
When i use the CSS menus, an put them in a iframe, when i click the buttons, it opens the page in a new window… Do you know what is the cause of this problem?
Yes you need to change your links to _top or _blank. So the full link would look something like this:
<a href=”http://www.yoursite.com/yourpage/” Title=”Your Site Title” target=”_top”>Your Link Text</a>
1st, thanks for all of your work. You make iWeb so much more enjoyable. But, I’m having a problem getting my facebook page to perform correctly inside an iframe. Please refer to my webpage and tell me if you have any ideas.
Thanks
Hello, I am being created a page Web, and it would like me that within this page, to place another one as samples in this subject, the problem is that after tightening some Link, I leave my page and I go away to that I have inserted in mine. The point is that I would like to be able to continue sailing in the external Web without needing leaving mine web, please help
watches my page that you see that I speak
i`m using Visual QuickMenu7
Thanks for this great site and all your hard. I have used the iframe code and all works OK with the exception of IE8 when you require a transparent background in a part iframe, as it renders them white!.
By amending the last line it of the code from this:
to this:
This should work OK now with IE8.
Test this out and see if it works OK. I am no coding expert, so I would like confirmation that this is the correct method to use.
Cheers
Garb-e!
iframe src=”https://www.iwebunlimited.com”; scrolling=”no”>
to this:
iframe src=”https://www.iwebunlimited.com”; scrolling=”no”; allowtransparency=”true”; frameBorder=”0″></iframe
Is it possible to make the Iframe auto-adjusting? So that if i for example link my Disqus comments, it will automatcally expand as new comments is added, so i can get rid of the scroll?
There currently is not. Please see Peters comment above-
Wondering iwebunlimited, how you were able to get the apple site into yours and have the ability to allow users to use it without navigating from your site. I’ve noticed a few blogs about this, but it appears that you have to have control of the site you are ‘iframing’ I’m assuming apple didn’t just pass over the controls… :-) Any suggestions?
I absolutely LOVE this site!
First thanks for all your site and video help!! I was trying to put all a url in my site in page GDW and it would not allow me to use my user and login? Help! Thanks again in advance!!! Here is the code that I used:
Your browser does not support IFRAME
I am using iFrame to add in the CSS drop down navigation bar. I’ve followed the instructions, however the background appears white, even when I put in allowtransparency=”true” or backgroud: transparent. additionally, if i put a photo below the html snippet, the dropdown is blocked by the photo. is there anyway to: a)have the iframe as the same background as the rest of the background of the page and b)have it so that the drop down menu can go over photos, writing, etc?
I am in need of some help here. I have read and started using Iframes on my iweb site. I have the header and footer that link to my other pages with html snippets. I now have added a forum with an iframe. My problem is when the forum iframe is on the page the header and footer will not link off the page. If I right click and open in new window or tab then it works fine, also if I remove the forum iframe everything works fine. Not sure what to do…Please help.
Nevermind it all seems to be working fine now.
Really like your site design, well written blog – will bookmark this!
Great article. One question, though (I hope someone can help me). I purchased a video xml player that I inserted into iweb via an iframe with the “index.html” page targeted. All of the files are uploaded into the same folder in iDisk. The player appears to be fine within iweb, with all of the videos playing back and all of the buttons working properly. However, when I publish the site, I can’t see anything. I can hear the video playing back, but the page is blank. Anyone have any ideas regarding this problem?
Thanks in advance for any help.
I guess everything works just fine in Firefox but not in Safari. Don’t know why…
Great tip and it works in safari for me but not on my iPod Touch 3rd gen it just goes onto the page i implanted and then it crashes Is it my iPod or is it a problem for everyone?
Having never made a site before now, this site has been very helpful, and without iFrames there is no way my site would look as it does! http://www.zizimages.com how do you like the effect? Obvious issue is for search engines, alternative text etc for images has no value for the parent page…. right?
Question, on the main page, clicking 1, 2, 3 etc triggers a fade transition effect, can this be done when changing iFrame contents? (see http://zizimages.com/Public_Events/HultGCC/HultGCC2010.html for links triggering iframe change) How do you get this effect!? Thank you!