iframe

If you want to embed external content like video or audio on your website, inline frames (iframes) have proven extremely useful for that. The tags provide a simple and elegant solution to ac­com­mo­date external content in a HTML document. Often, website visitors won’t even notice that they’re viewing external content. But how do you add an iframe?

Generally, a website is a single HTML document. To insert ad­di­tion­al elements, one must use a frame which make it easy to embed documents, images or even videos. In the past, this was resolved by using normal HTML frames, but these are no longer in use nowadays. Instead, iframe tags have emerged as a popular choice to embed third-party content. The content inside an iframe is separated which means that it is loaded sep­a­rate­ly and can be navigated in­de­pen­dent­ly from the rest of a website.

That’s one of the reasons why inline frames are used to integrate content and com­po­nents from other websites, such as YouTube videos or Google Maps. Even social media plug-ins or specific apps can be in­cor­po­rat­ed via iframes, as well as HTML documents.

Inline frames are created within the HTML code through the iframe tag.

For the frame to be correctly filled out, you need to specify the following at­trib­ut­es:

• src: Source of the content to be embedded, specified in the form of a URL.
• width: Width of the frame which can be specified in pixels or percent.
• height: Height of the frame which can be specified in pixels or percent.
• name: Name of the specific frame.
• sandbox: Connects the inline frame with specific security measures.
• srcdoc: Contains the HTML code, which is to be displayed in the iframe.

There are some other at­trib­ut­es, many of which are outdated and haven’t been supported since HTML5. If you want to specify external content further, you should resort to CSS solutions for these functions.

• scrolling: Should the inline frame be scrolled sep­a­rate­ly?
• align: What is the alignment of the frame?
• frame­bor­der: Should the frame border be trans­par­ent?
• longdesc: Long de­scrip­tion of the frame.
• mar­gin­width: Width of the left and right margins.
• mar­gin­height: Width of the upper and lower margin.
• vspace: Vertical space around the iframe.

The actual content of the iframe and part of its structure can only be arranged by using these at­trib­ut­es. There is generally no content inside the tag bracket. This space is used to ac­com­mo­date al­ter­na­tive text. Where the browser doesn’t load an iframe, the text of the iframe will be displayed. However, that’s rarely the case nowadays. All popular browsers such as Chrome, Firefox and Safari can display iframe content.

A valid iframe typically looks like this:

In this example, the code points to a HTML document on another website. HTML documents that are located on one’s webserver can be in­cor­po­rat­ed using an iframe tag. In this case, you just have to add the name of the file and possibly the path to the location of the desired document.

In order to create the iframe in a way that is appealing, one must utilize CSS. In most cases, this would only create the frame itself. If the content orig­i­nates from an external source, you can rarely customize the content to be displayed on your own website. With a few CSS tricks, an iframe can be in­te­grat­ed into a re­spon­sive web design.

Inline frames are useful if you want to embed elements from external sources into your own site. Instead of sending the user to another domain, they can continue to surf the website. As a result, user-friend­li­ness increases con­sid­er­ably. In addition, the in­te­gra­tion has some technical ad­van­tages. The iframe’s content is loaded in­de­pen­dent­ly from the rest of the website’s content. In this way, the content is available to the user, even when other page elements haven’t been loaded.

In reality, inline frames are becoming in­creas­ing­ly less important because there are drawbacks to the method. For example, it doesn’t handle embedded elements from search engines ap­pro­pri­ate­ly. This can affect search engine op­ti­miza­tion and therefore the ranking of a website. The security risk as­so­ci­at­ed with iframes is of greater concern. If you embed external content, it may harm your system. The content in an iframe could, for example, contain a harmful plug-in or the website owner could fall victim to a phishing attack without realizing it.

As data pro­tec­tion becomes a growing concern among website owners and users, iframes are hotly debated. Inline frames are often used in social media plug-ins which collect user data, even if the website visitor doesn’t interact with a ‘like’ or ‘share’ button or is a reg­is­tered user.