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.
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, a document or even a complete secondary website. The content can be integrated at any place without the need to add it into 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:
- 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>.
- Add the path or URL to the content you want to embed after src=. The address must be in quotes.
- For “name” and “title” fill in placeholders, which will be shown if your content cannot be opened.
- 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.
- If you want to embed a video, you can usually use a predefined iframe. On YouTube, click “Share” and then “Embed”.
- 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:
- frameorder=”0″ à frame not visible
- frameorder=”1″ à frame visible
- scrolling=”yes” à force scrollbars
- scrolling=”no” à suppress scrollbars
- scrolling=”auto” à automatically according to space needed
- 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 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 the position you want. You can now save and publish your post.
Embedding content is not always possible, because website administrators have the option to 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 improving 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 one of the frequently used widgets. Interactive maps with markers can be displayed.
- Widgets: In addition to the integration of 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 or interactive appointment calendars or calculators. Have look at our detailed instructions on how to embed customized Apps to 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 content of the frame 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 but not of your website. Therefore, you should avoid using iframes for SEO-relevant topics.
Even more serious is the security risk. If you embed an 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.