The video tutorials on this site are of poor quality, those that attend classes will receive a live demonstration and will be provided the tutorial videos in a format that can be saved to their computers.


Thank you for visiting.

« 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.

Topics: HTML, WordPress |

3 Responses to “How to Insert an iFrame into a Website and/or Blog”

  1. Cassidy Bates Says:
    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!

  2. Ian Richardson@Internet Business Says:
    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

  3. uk Says:
    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.

Comments

Feed Prices for ATLANTA

Who is Aunt Brenda?

Aunt Brenda is Brenda Richterkessing, my aunt, mentor and teacher. She is a licensed Realtor with Keller Williams Realty - First Atlanta and team leader of RKiHomes.

At a young age Brenda introduced me to web and graphic design and in March of '07 she introduced me to the world of Real Estate.

This site is dedicated to Brenda and in tribute to her for the doors she has helped open for me.






Top Producer Reseller Stamp
icontact.gif
Carl Martens (Richterkessing, Inc.): Real Estate - Other in Sandy Springs, Fulton County, Georgia Globe of Blogs