How to Use iFrames in WordPress: A Complete Guide

BuiltWith Trends reports that iFrames are the top choice among all Document Standards on the internet. iFrames lets you embed YouTube videos and Google Maps along with external websites without needing direct hosting access.

Although WordPress extends multiple built-in embedding tools, you can use iFrames to integrate additional content that WordPress lacks integrated features for.

The guide explains how to implement iFrames in WordPress, emphasising both fundamental usage and sophisticated implementation considerations.

Understanding iFrames and Their Uses

A basic understanding of iFrames and their practical value is necessary before proceeding with implementation.

What is an iFrame?

An iFrame is like a small window on a webpage that lets you show content from other websites without mixing it with your own page.

It allows things like videos, maps, or social media posts to appear on your site, but the content inside the iFrame works on its own, separate from the rest of your page. This way, it won’t slow down or mess up the layout of your website.

Everyday use cases for iFrames include:

• Embedding Videos: Integrating videos directly into your pages from platforms like YouTube or Vimeo
• Integrating Maps: Displaying interactive maps from Google Maps or other mapping services
• Social Media Feeds: Embedding live feeds from platforms like X or Facebook
• External Forms and Applications: Integrating forms or applications hosted on external servers
• Displaying Content from Other Websites: Embedding specific sections or entire pages from other websites (with caution)

Basic iFrame Code

The standard iFrame HTML tag looks like this:

“`html

<iframe src=”https://example.com” width=”600″ height=”400″></iframe>

“`

This embeds content from “example.com” and sets a specific width and height.

How to Implement iFrames in WordPress

Multiple methods, with distinct benefits and constraints, can be used to integrate iFrames on your WordPress website. A few are:

1. Using the WordPress Text Editor

WordPress text editor offers one of the simplest methods for implementing iFrame HTML code. It allows you to embed the iFrame HTML code directly for your posts or pages.

• Obtain the iFrame Code: Extract the iFrame Code from the source to where you want to embed the content. For this step, you must copy the embed code provided by content providers.
• Change to Text Editor: Move to the Text Editor View in your WordPress post or page writing interface.
• Paste the code from the iFrame: Embedded content requires you to paste the previously copied iFrame code at the specific part where you want the content to appear.
• Modify iFrame Properties: Adjust the iFrame attributes by modifying its width, height and scrolling parameters for a customised presentation.
• Preview and Publish: Use the preview tool and publish your work to confirm the correct display of the iFrame before releasing your new content.

Source

2. Using Plugins

Users who want an easy-to-use interface can choose from various WordPress plugins that make iFrame embedding easier. WordPress plugins enable users to manage iFrames through visual interfaces and added features.

• Install and Activate a Plugin: Search for “iFrame” in the WordPress plugin repository. Install and activate a reputable plugin from the available options.
• Use the Plugin’s Shortcode or Block: The plugin offers two options for iFrame insertion, including shortcodes and blocks that you can implement through step-by-step instructions.
• Configure Plugin Settings: Configure your plugin settings through its interface to personalise the appearance and operational behaviour of iFrames.

Source

3. Embedding Directly With HTML in a Custom HTML Block

The Gutenberg editor allows for the addition of custom HTML blocks. This allows for direct insertion of iFrame code while remaining in the visual editor.

• Add a Custom HTML Block: Add a Custom HTML block to the desired location within your content.
• Paste the iFrame Code: Add a Custom HTML Block at the desired place inside your content. Insert the iFrame Code into the HTML section and paste the copied code.
• Preview and Publish: A preview check will determine the iFrame display accuracy, and subsequent publication releases your modifications.

How to Customise iFrame Attributes

iFrame attributes allow you to customise the presentation and operational aspects of embedded content. Key attributes include:

• `width` and `height`: Specifies the dimensions of the iFrame in pixels or percentages
• `src`: Defines the URL of the content to be embedded
• `frameborder`: Specifies whether to display a border around the iFrame
• `scrolling`: Controls whether scrollbars are displayed within the iFrame
• `allowfullscreen`: Enables fullscreen mode for embedded videos
• `style`: Allows you to apply CSS styles to the iFrame

Example:

“`html

<iframe src=”https://www.example.com” width=”600″ height=”400″ frameborder=”0″ scrolling=”no”></iframe>

“`

Security and Performance Considerations

Although iFrames enable flexible implementation, they create significant security and performance challenges which demand scrutiny.

Security

• Trusted Sources: Insert content from certified sources that safeguard your system from security vulnerabilities.
• HTTPS: All content embedded must use HTTPS to suppress mixed content warnings and security vulnerabilities.
• Cross-Site Scripting (XSS): The iframe element becomes vulnerable to cross-site scripting (XSS) attacks when malicious actors use it to execute harmful scripts on web pages. Untrusted scripts embedded within web pages could prompt unauthorised behaviour, data theft operations, or force users toward harmful websites when interacting with the content. Review embedded content for possible script execution that can harm your platform.

Performance

• Loading Time: Page loading times grow considerably when iFrames contain substantial content or when this content is hosted on slow-loading servers.
•  Mobile Responsiveness: With 96% of global internet users accessing the web via mobile in mid-2024, responsive design is essential. Since improper iFrame implementation can hinder mobile responsiveness, rigorously verify iFrame setups across diverse screen sizes.

Common Issues with iFrames in WordPress

iFrames can sometimes present challenges within WordPress despite their utility. Here are some common issues you might encounter.

1. iFrame Not Displaying

Ensure the source URL (`src=”…”`) is correct and accessible. Check if the website allows embedding via iFrames.

2. iFrame Content Not Loading Properly

Some websites prevent embedding due to security settings (`X-Frame-Options`). Try using an alternative method like embedding via JavaScript or API.

3. iFrame Not Responsive

Use CSS to make it responsive, or select a plugin with mobile-friendly settings.

iFrame Security Concerns and Best Practices

While iFrames are helpful, they come with security risks. Here is how to use them safely:

1. Enable Sandbox Attributes

Adding the `sandbox` attribute restricts potentially harmful actions within the iFrame:

“`html

<iframe src=”https://example.com” sandbox=”allow-scripts allow-same-origin”></iframe>

“`

This prevents the iFrame from executing JavaScript or stealing user data.

2. Restrict External Content Using X-Frame-Options

A clickjacking attack using iFrames lies in the practice of placing malicious content on top of legitimate websites. Websites stop iFrame usage by implementing the `X-Frame-Options` header to defend against clickjacking assaults.

Check whether the content source enables cross-domain embedding because the iFrame might not load the content successfully.

3. Avoid Embedding Untrusted Websites

Using content from unknown sources through embedded links might send your website to dangerous malware attacks or phishing attempts. Embed iFrames exclusively from verified and reputable website domains.

4. Use Responsive iFrames

iFrames’ default size restrictions can generate layout problems when used on mobile screens. Use CSS to make them responsive:

“`css

.responsive-iframe {

width: 100%;

height: 400px;

}

“`

Then, apply it in your HTML:

“`html

<iframe class=”responsive-iframe” src=”https://example.com”></iframe>

“`

The Bottom Line

Embedding third-party content via iFrames enables you to add external content to your WordPress site without sacrificing performance.

However, security concerns and platform responsiveness must be top priorities to provide users with safe interactions and smooth platform usage. This guide lets you combine iFrames into your WordPress platform with efficient optimisation and security protection.

To further benefit from WordPress hosting services, try Crazy Domains. We simplify WordPress installation, ensure automatic updates and offer robust security features. They enable easy content embedding and site management so you can concentrate on delivering compelling visitor experiences. Sign up today!