« RSS News Feeds in Plain English | Home | Google Maps Street View Feature »
How to Insert an iFrame into a Website and/or Blog
By Carl Martens | March 25, 2008
When you want to display information from one website on another site, yet keep the content of each separate, the most obvious solution is to use an iFrame. An iFrame is a floating frame inserted within a Web page which makes it possible to embed another Web page (HTML document) inside another.
You can put an iFrame in either a blog post, or in a special page element. It’s a dynamic window; when something changes on the site contained within the iFrame, the site with the iFrame will update/refresh to reflect this change.
Here is a great HTML code to use in order to insert an iFrame into a website, WordPress blog (or other blog platform):
<iframe width=”100%” frameborder=”0″ src=”insert site URL here between the quotations” height=”400″></iframe>
It’s got a number of settings that can make it more useful to you. You can set the height and width of the IFrame, to determine how much screen space, inside your blog, that you wish to use to display the iFrame contents. If the iFrame contents are larger than the allocated space, by default you’ll get scroll bars; these can, at your own risk, be deactivated.
An example of an iFrame is below. I have framed in the Wolfnet IDX. Note, due to the dimensions of this blog post, by default you’ll get scroll bars.
I have used the same HTML code below, however I have changed the height to 1250 in order to eliminate the vertical scroll bar.
April 4th, 2008 at 1:26 pm
Carl…Thanks for sharing this code. Seems so simple…but I couldn’t figure this out to save myself. I guess that’s why you are the expert! I will be putting this to use asap!
January 19th, 2009 at 7:32 am
Hi Carl… this was just what I needed to put a video in my blog. Like Cassidy said “seems so simple” but it really got me out of a jam.
Thanks
Ian
May 12th, 2009 at 7:01 am
This seems nice, but there is another problem. Putting a iframe into a webpage is as easy as shown above. Mostly (maybe at Google Maps or Youtube) you get finished iframe Code just for copy and paste.
The problem is the TinyMCE Editor in Wordpress. When you insert a iframe there in HTML-View and change to graphical-view the editor cuts off some html-tags and the iframe does not work anymore.
For videos it´s easy, you can use a media-button in the toolbar of the TinyMCE-Editor.
But for Google Maps iframes this seems not to work.
The solution is to get the TinyMCE-Editor don´t to cut off special html-code.