Embedding an iframe – what you need to know

With the help of iframes, you can integrate any external content into a website. We explain how embedding an iframe works when iframes are useful and what the risks are.

Want to get started? Download this Accessibility checklist for iFrames

Just enter your contact data, and we´ll send you our checklist. This checklist helps you consider everything regarding iFrames. Check it out for free!

What is an iframe?

An iframe or inline frame is an HTML element that can be used to integrate external content into a website. This can be a video, advertisement, document, or even a complete secondary website. The content can be integrated anywhere without the need to add it to the structure of the web layout. It is also usually possible to adjust the size.

Embedding an iframe – step by step

Embedding an iframe is very simple. We will explain the procedure step by step:

1. Use the following code: <iframe src=”website.html” width=”90%” height=”400″ name=”iframe” title=”This is my video”></iframe>. As you can see, each program snippet starts with <iframe and ends with </iframe>.
2. Add the path or URL to the content you want to embed after src=. The address must be in quotes.
3. For “name” and “title,” fill in placeholders, which will be shown if your content cannot be opened.
4. For “width” and “height,” you can set the width and height of the content individually so that no inappropriate standard sizes are used. You set the values in relation to the website in percent or pixels.
5. If you want to embed a video, you can usually use a predefined iframe. On YouTube, click “Share” and then “Embed.”
6. Now you can place the code at the position you want on your HTML page.

You can use the following attributes to further adapt the appearance of the embedded content:

Frame:

• frameorder=”0″ à frame not visible
• frameorder=”1″ à frame visible

Scrollbars:

• scrolling=”yes” à force scrollbars
• scrolling=”no” à suppress scrollbars
• scrolling=”auto” à automatically according to space needed

Alignment:

• align=”left” à iframe is placed on the left, subsequent content is placed around the iframe on the right
• align=”right” à subsequent content is placed around the iframe on the left side
• align=”middle” à iframe will be placed in the center

Distance to other content:

• marginwidth=”x” à distance right and left
• marginheight=”x” à distance above and below

Embedding iframes in WordPress

In the way described above, you can also use iframes in the content management system WordPress. Just open the post or page you want to use. Then click on “Text” in the upper right corner above the text field and insert the iframe code at your desired position. You can now save and publish your post.

Embedding content is not always possible because website administrators can disable embedding.

Use cases for iframes

In principle, any content can be embedded into websites using iframes. The most common use cases areas are:

• YouTube videos: Embedded YouTube content is popularly used to make relevant videos directly available to users. Videos bring many benefits, such as visual enhancement and improved visitor experience. YouTube even compresses and buffers data optimally, allowing videos to play even on poor data lines.
• Google Maps: Embedding maps from Google Maps is also a frequently used widget. Interactive maps with markers can be displayed.
• Widgets: In addition to integrating Google Maps, many companies also offer frames in the form of other widgets, for example, weather reports or booking platforms.
• Applications: External applications can be used to integrate, for example, contact fields, comment functions, interactive appointment calendars, or calculators. Have a look at our detailed instructions on how to embed customized Apps on your website.

Advantages and disadvantages of iframes

Embedding content via iframes is very easy to handle and saves a lot of programming effort. As the frame’s content is loaded independently of the rest of the page, the embedded content is available even if other elements have not yet been loaded, and loading time is reduced. Users can also comfortably continue surfing, which increases the user experience.

However, there are also some disadvantages that should be considered when using iframes. First, you can’t link or bookmark embedded content. Second, you have no control over the functionality of the external content. Accordingly, there is no guarantee that content will not be changed or deleted at some point.

For search engine optimization (SEO), iframes are also problematic because the bots of Google and Co. do not recognize the content. In some cases, they are even classified as duplicate content. Therefore, frames should be seen as part of your content, not your website. Therefore, you should avoid using iframes for SEO-relevant topics.

Even more serious is the security risk. If you embed external content, it may contain a damaging plug-in or phishing, for example. These are attempts to get personal data via fake websites or emails. However, if the origin of the iframe is known, there is little risk in embedding it. With content from Open as App, safety is guaranteed.

Don’t forget your Accessibility checklist for iFrames

Just enter your contact data, and we’ll send you our checklist. This checklist helps you consider everything regarding iFrames. Check it out for free!