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.

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:

  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 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.

Category

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

Popular posts

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

Borislav Kiprin

20 innovative Tools for Excel & Google Sheets in 2022

Innovative Tools Excel

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

Angelika Methner

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

self service app

Angelika Methner

4YFN Barcelona – Hotspot for Innovation & Impact

MWC und 4YFN Barcelona

Angelika Methner

Open as App appoints Michael Stoelwinder as new CEO

Michael_Stoelwinder_OpenasApp

Angelika Methner

New Pricing Plans in 2021

pricing

Angelika Methner

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

successful no-code tools

Angelika Methner

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

Angelika Methner

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

Angelika Methner

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

Angelika Methner

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

Angelika Methner

How to Build Manufacturing Solutions With 4 No-Code Apps

man holding gray steel frame

Angelika Methner

The Top Custom Mobile App Design Tips

person writing on white paper

Borislav Kiprin

Excel Tricks to Create Professional Apps for Businesses

two person standing on gray tile paving

Angelika Methner

Shadow IT and Its Damaging Consequences for Companies

shadow it

Angelika Methner

How to Boost Your Consulting Business with Apps

consulting business

Let’s keep in touch!

Newsletter-Girl
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

Projektmanagement-Checklist

Alexandra Müller

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

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

11 good reasons for your business to have an app

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

Alexandra Müller

Construction site safety checklist – how an app can improve safety

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

Alexandra Müller

How much does it cost to develop an app?

Digitales Bautagebuch mit Open as App erstellen

Alexandra Müller

How to create your digital construction daily log

CRM-Systeme mit Excel erstellen

Alexandra Müller

Creating CRM systems with Excel