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.

Embedding an iframe - step by step

Alexandra Müller

Guides

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!

Category

App App Apps Best Practice Case Studies Events Features Guide Guides Press Uncategorized Webinars

Popular posts

Alexandra Müller

How to optimize your workflow analysis with a smart app 

workflow analysis

Alexandra Müller

Creating digital signatures: All information at a glance

digital signature

Alexandra Müller

Conducting an energy audit: How a smart app can help you

energy audit with app

Alexandra Müller

How can I create my own iPhone app without coding?

creating an iPhone app

Borislav Kiprin

20 innovative Tools for Excel & Google Sheets in 2023

Innovative Tools Excel

Alexandra Müller

Survey tools: The 6 best alternatives to Google Surveys

survey app

Alexandra Müller

Factory acceptance test via app – what you need to know

Factory Acceptance Test per App

Alexandra Müller

Mandatory recording of working hours – how apps can help with the implementation

recording of working hours with apps

Alexandra Müller

How to optimize your manufacturing process plan with apps

Manufacturing process planning with apps

Alexandra Müller

Project management: Why you can’t go without a checklist

Projektmanagement-Checklist

Alexandra Müller

11 good reasons for your business to have an app

Young urban professional man using smart phone in office building indoors. Businessman holding mobile smartphone using app texting sms message wearing suit jacket and bag.

Alexandra Müller

Construction site safety checklist – how an app can improve safety

Checkliste für Baustellensicherheit – mit einer smarten App zu mehr Sicherheit

Alexandra Müller

How much does it cost to develop an app?

Wie hoch sind die Kosten für die Entwicklung einer App?

Alexandra Müller

How to create your digital construction daily log

Digitales Bautagebuch mit Open as App erstellen

Alexandra Müller

Creating CRM systems with Excel

CRM-Systeme mit Excel erstellen

Alexandra Müller

How to make money with no-code apps

make money with no-code apps

Alexandra Müller

The 8 best app makers

Mit einem App-Baukasten einfach eine App selbst erstellen

Alexandra Müller

How can I create an app?

App erstellen - so funktioniert es

Alexandra Müller

Embedding an iframe – what you need to know

Embedding an iframe - step by step

Borislav Kiprin

Create an App With Google Sheets for Your Business

Create an app with Google Sheets

Manfred Streit

How to Turn an Excel Spreadsheet Into an App

Excel spreadsheet into an app

Manfred Streit

The Basic Guide to No-Code Apps and Platforms

basic guide no-code apps

Damian Roller

Self-Service Apps based on Spreadsheets – Three Strategies for Beginners

self service app

Damian Roller

4YFN Barcelona – Hotspot for Innovation & Impact

MWC und 4YFN Barcelona

Damian Roller

Open as App appoints Michael Stoelwinder as new CEO

Michael_Stoelwinder_OpenasApp

Damian Roller

New Pricing Plans in 2021

pricing

Damian Roller

No-Code Tools Comparison: Open as App and Glide Apps

successful no-code tools

Damian Roller

How to boost your workflow automation with no-code apps

workflow-automation-no-code-apps

Borislav Kiprin

Custom mobile app development in Microsoft 365

Custom mobile app development

Damian Roller

How to Select between BI and Excel Data Analysis [Tableau Alternative]

Tableau Alternative

Borislav Kiprin

Enhancing App Security and Data Protection: No-Code Apps

app security

Damian Roller

Bread baking per app – enjoy great home-made bread every day

home made bread

Borislav Kiprin

How to Drive Digital Innovation without the IT Department

digital innovation

Borislav Kiprin

How a Multi-Devices KPI Report App Can Improve Performance

KPI report App

Damian Roller

Best 8 No-Code Apps to Boost Real Estate Agent Performance

Boost real estate agent performance

Borislav Kiprin

Open as App adds the power of non-technical citizen developers to Microsoft 365

microsoft

Let's keep in touch!

Skip form
Form skipped
Newsletter-Girl
workflow analysis

Alexandra Müller

How to optimize your workflow analysis with a smart app 

digital signature

Alexandra Müller

Creating digital signatures: All information at a glance

energy audit with app

Alexandra Müller

Conducting an energy audit: How a smart app can help you

creating an iPhone app

Alexandra Müller

How can I create my own iPhone app without coding?

Innovative Tools Excel

Borislav Kiprin

20 innovative Tools for Excel & Google Sheets in 2023

survey app

Alexandra Müller

Survey tools: The 6 best alternatives to Google Surveys

Factory Acceptance Test per App

Alexandra Müller

Factory acceptance test via app – what you need to know

recording of working hours with apps

Alexandra Müller

Mandatory recording of working hours – how apps can help with the implementation

Manufacturing process planning with apps

Alexandra Müller

How to optimize your manufacturing process plan with apps