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 accommodate 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?

What is the iframe tag used for?

Generally, a website is a single HTML document. To insert additional 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 separately and can be navigated independently from the rest of a website.

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

The structure of inline frames

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

<iframe>...</iframe>

For the frame to be correctly filled out, you need to specify the following attributes:

  • 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 per cent.
  • height: Height of the frame which can be specified in pixels or per cent.
  • 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 attributes, 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 separately?
  • align: What is the alignment of the frame?
  • frameborder: Should the frame border be transparent?
  • longdesc: Long description of the frame.
  • marginwidth: Width of the left and right margins.
  • marginheight: 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 attributes. There is generally no content inside the tag bracket. This space is used to accommodate alternative 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:

<iframe src="http://example.org/demo.html" height="400" width="800" name="demo">
    <p>Your browser does not support an iframe!</p>
</iframe>

In this example, the code points to a HTML document on another website. HTML documents that are located on one’s webserver can be incorporated 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.

Tip

If you want to embed YouTube videos on your website, you can use inline frames. The video platform provides the appropriate code for this on the page of the relevant video.

In order to create the iframe in a way that is appealing, one must utilise CSS. In most cases, this would only create the frame itself. If the content originates from an external source, you can rarely customise the content to be displayed on your own website. With a few CSS tricks, an iframe can be integrated into a responsive web design.

Advantages and disadvantages of iframes

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-friendliness increases considerably. In addition, the integration has some technical advantages. The iframe’s content is loaded independently 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 increasingly less important because there are drawbacks to the method. For example, it doesn’t handle embedded elements from search engines appropriately. This can affect search engine optimisation and therefore the ranking of a website. The security risk associated 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 realising it.

As data protection 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 registered user.

Summary

Inline frames still have their merits when it comes to creating websites. In many cases, however, the desired effect can be achieved using alternative techniques such as CSS or JavaScript.

Was this article helpful?