Iframes

An iframe (short for inline frame) is a special feature in web pages that allows you to display content from another website or source inside your own page—kind of like a window inside a window.

Think of an iframe like a picture frame, but instead of holding a photo, it holds another web page, a video, a map, or even interactive content.

Why Are Iframes Useful?

Iframes allow you to:

  • Embed Videos – Display a YouTube or Vimeo video inside your webpage.
  • Show Maps – Add a Google Map without needing to send visitors to another website.
  • Include External Content – Display content from another site (like a form or a document) without making users leave your page.

How an Iframe Works

If you wanted to show a YouTube video on your website, you could use an iframe to display it without making visitors leave your site.

For example:

Instead of saying:
“Go to YouTube to watch this video!”

You can display it directly on your page using an HTML iframe tag, for example

<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  frameborder="0" allowfullscreen>
</iframe>

This creates a video box right on your site where visitors can watch the content immediately.

An alternate approach

In addition to using the raw iframe HTML tag as shown above, this Jekyll template also supports the use of a custom Markdown tag

Iframe Markdown Code

`iframe https://www.youtube.com/embed/dQw4w9WgXcQ width=560`

Rendered Content

iframe https://www.youtube.com/embed/dQw4w9WgXcQ width=560

What You Need to Know (Without the Jargon)

  • An iframe is like a small browser window inside your webpage.
  • It lets you display content from another website without your visitors needing to leave.
  • Common uses: Videos, maps, forms, and interactive tools.
  • You don’t need to code a full webpage—just copy and paste an iframe code from YouTube, Google Maps, or another source.