How to Add iFrames in WordPress

Are you a WordPress user looking for an easy, no-code way to display content from other web pages on your site? Using iFrames is an easy and elegant solution for this. 

An inline frame (or iframe) allows a user to embed content from another website on their page. While there are various ways to do this, the challenge is in embedding external content safely without compromising site security or impacting performance.

In this article, we’re going to show you three methods for displaying iframe content directly within your WordPress site and give you some tools for automatically configuring this content. We’ll also touch on the legal and security implications and suggest some tips to help you. 

The Quickest Ways to Add iFrames to WordPress 

An iframe offers a way of embedding HTML content from another site into your own site without having to host it on your own WordPress site through the media library. It’s often used for video content, from YouTube for example, but can also be used for other interactive elements such as Google Maps, weather forecasts or a music player.

WordPress does provide a quick way of doing this for larger sites like YouTube or Vimeo – you can just paste the URL directly into the WordPress editor or use the block provided. However, it won’t be able to accommodate all external websites in this way. Tech-savvy WordPress users who want more control or want to embed iframe content from non-supported platforms can therefore add a custom HTML block with a standard inline iFrame code.

Having said this, a dedicated embedding plugin like FooBox is often the best solution, because it ensures lightweight embedding of content, mobile responsiveness and smooth UX to make sure iframe content doesn’t slow down your site. 

Below, we take a look at all three of these methods.

Using WordPress’s Built-in Embed Blocks: The Beginner’s Method 

WordPress natively supports video embeds from major platforms like YouTube and Vimeo through its oEmbed functionality. The process here is very straightforward: simply copy and paste the URL of your desired video content into the WordPress block editor on any page or post. 

Alternatively, WordPress includes a number of options for embeds. Using any of these will allow you to embed content from these platforms, such as Pinterest, TED, Spotify or Issuu. Simply select the block for the platform you wish to use, and paste the URL for the specific content you want to display. 

While this is certainly an easy way to include dynamic content on your site, this method falls short when you want to embed content from sites that aren’t natively supported by the embed functionality in WordPress. Moreover, this method lacks engagement features – viewers watch and leave. However, FooBox PRO’s social sharing and lightbox capabilities (which will be covered later in the article) allow you to upgrade your iframe content for better engagement.

Manual iFrame Code: When and How To Use it 

The second method, manual iframe embedding, is ideal for embedding content from platforms or services not supported by WordPress’s built-in oEmbed functionality. This method also provides more control and flexibility, such as by allowing you to customize iframe dimensions, styles and behaviors based on the layout of your site and content.

The process of manually embedding iframe code is as follows:

1. Open the WordPress block editor and add a Custom HTML block by selecting it from the block menu.

2. Paste the standard iframe code in the block:

<iframe src="URL_OF_EXTERNAL_CONTENT" width="WIDTH_VALUE" height="HEIGHT_VALUE" frameborder="0" allowfullscreen></iframe>Code language: HTML, XML (xml)

3. Replace URL_OF_EXTERNAL_CONTENT with the URL of the external content you wish to display. 
4. Adjust the width, height and border attributes to fit the layout of your page.

Again, this is a fairly simple way of embedding iframes, especially if you are familiar with even basic HTML. However, this method comes with potential risks such as security vulnerabilities (for example, XSS attacks), when embedding content from untrusted sources. Additionally, it can affect page speed and page performance when incorrectly configured. 

Using a plugin like FooBox simplifies the process of embedding iframe content and comes with the benefit of responsiveness and enhanced security. This is ideal for users who want an easier solution.

Why FooBox PRO is the Smart Choice for Video Embeds 

FooBox PRO offers an effective solution to common video embedding challenges. It’s simple to implement, and overcomes common frustrations experienced when embedding videos, such as videos breaking on mobile devices, slow-loading pages from heavy manual video embeds, and security warnings from iframe embeds.

iFrame content can be displayed with FooBox via a pop-up lightbox, which is a sleeker, more modern approach to displaying external content than the automatic or manual embeds with standard WordPress functionality. 

A lightbox displays videos in an automatically-sized popup window that activates when a link is clicked, rather than directly on the page. This serves to declutter your content, improve page load times and provide a mobile-friendly viewing experience. This results in improved user experience and engagement. 

Here’s a demo!

Setting Up Video Lightboxes With FooBox 

To start displaying your videos and iframe embeds in a lightbox, you can follow the steps below:

• Download and install FooBox PRO. It works out of the box, so there is no initial setup required. However, you can adjust the lightbox theme and appearance in FooBox -> Settings.
• If you want to embed YouTube or Vimeo content, insert a link to the video URL within the block editor of the post or page you want the iframe content to appear, then switch to ‘Text’ mode in the editor, and insert the class “foobox” into the “a” tag, which would look like this:

<a href=”http://youtu.be/example” class=”foobox”>Your Text Here</a> Code language: HTML, XML (xml)

• For other video types, you can use inline HTML for video embeds by following this method.

With FooBox PRO’s video capabilities, you can open videos from thumbnail images or text links and have automatic sizing for all screen sizes. FooBox PRO includes deep linking, and you have the ability to add a download function and social sharing to your lightbox. 

Security and Legal Considerations 

Using iframes can be an effective way to add dynamic content to your website. However, iframe embedding to external content does come with some security considerations. For example, you run the risk of cross-site scripting (XSS) attacks if the embedded content comes from untrusted or malicious sources. 

It is advisable to not add HTTP content onto HTTPS pages, and to add the sandbox attribute to iframe code: 

<iframe src="URL" sandbox="allow-scripts allow-same-origin" frameborder="0"></iframe>Code language: HTML, XML (xml)

Plugins like FooBox automate security and responsive enhancements for iframes in WordPress, which ensures best practices while making it easier to implement. They enhance security by filtering iframe content, enforcing HTTPS, and sandboxing to prevent vulnerabilities. For responsive design, FooBox dynamically resizes iframes, maintains aspect ratios, and integrates media queries to ensure optimal display across devices. It also improves user experience with features like lazy loading, lightbox integration, and customizable controls. By simplifying tasks with shortcodes, predefined templates, and automatic compatibility handling, FooBox streamlines iframe management while maintaining performance, security, and usability.

Following iframe embedding best practices, such as avoiding links to copyrighted material, is essential for legal compliance and avoiding potential penalties or takedown requests. It also protects your site’s credibility by ensuring that all embedded content is ethical, secure, and aligned with copyright laws. Following these practices fosters trust with users and content creators while safeguarding your website’s reputation and functionality.

Start Embedding Videos the Professional Way Today 

In our guide to embedding iframes in WordPress, we’ve looked at three different approaches and when to use them:

• Basic iframe embedding is good for those who want a quick solution to embed video content from major supported sites.
• Embedding iframe content via custom HTML WordPress blocks is better for those who want slightly more customization, and who are more comfortable with manual coding.
• FooBox is a plugin that allows you to embed smarter, giving you more control over iframe content display and separating bulky video content from your main page, meaning no more slow loading times, mobile responsiveness issues, and broken layouts.

For enhanced iframe embedding capabilities on your WordPress site, install FooBox PRO.