How to Easily Embed iFrame Code in WordPress: A Comprehensive Guide

As a WordPress developer with over 15 years of experience, I‘ve helped hundreds of sites implement iframes. Used properly, iframes can enhance your website and visitor experience. However, there are also downsides to be aware of.

In this comprehensive guide, I‘ll share my insider knowledge to help you make the most of iframes in WordPress.

Why Use iframes in WordPress?

Here are some of the benefits of using iframes:

• Saves bandwidth: Instead of hosting videos on your own server, you can seamlessly embed content from YouTube, Vimeo, etc. This reduces your hosting costs.

• Avoids copyright issues: By iframeing copyrighted content instead of downloading and reuploading, you steer clear of potential legal problems.

• Content updates automatically: If the source iframe page changes, it will update on your site too.

However, iframes aren‘t always the right choice. Let‘s compare them to oEmbed…

iframes vs oEmbed

For YouTube videos, enable oEmbed instead of iframes. Here‘s why:

• oEmbed is built into WordPress
• Videos resize responsively by default
• No coding required, just paste the URL

In fact, YouTube switched their API to only allow oEmbed embedding now.

For social media posts, I recommend using a dedicated social feed plugin like Smash Balloon. The customization and responsiveness is much better than iframes.

So weigh the pros and cons for your specific use case. iframes work best for embedding maps, PDFs, surveys, and other static content.

Next, let‘s look at how to properly implement iframes in WordPress…

1. Using the Source‘s Embed Code

Many websites like Google Maps provide ready-made iframe code to copy:

Let‘s embed a Google Map in WordPress:

1. Search for the location you want to display
2. Click on the 3 dots to open the menu
3. Select "Share or embed map"
4. Copy the iframe code provided

Now go to your WordPress editor. Click the "+" icon to add an HTML block.

Paste the iframe code into the block:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3456.014121995463!2d-120.42970188503253!3d37.94191976261831!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8090c5e627c1c51d%3A0x15b2e40d177fb0a2!2sMain%20St%2C%20California%2095327!5e0!3m2!1sen!2sus!4v1620772112804!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

This method works great for Google Maps, Typeform surveys, YouTube videos, and any site with embed code available.

2. Use an iframe Plugin

If no embed code is provided, use a plugin like iframe to auto-generate the code.

Over 87,000 WordPress sites have installed this iframe plugin:

To use it:

1. Install and activate the iframe plugin
2. Add a shortcode block
3. Enter [iframe src="URL"]
4. Replace URL with page to embed

For example, to embed a PDF:

[iframe src="https://example.com/guide.pdf"]

You can even set the width and height:

[iframe src="https://example.com/guide.pdf" width="800" height="600"]

This plugin makes it easy to embed any URL in WordPress without coding.

3. Manually Creating iframe Code

For full control, you can manually write the iframe code in HTML:

<iframe src="URL" width="800" height="600"></iframe>

Let‘s embed a Google Form survey:

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfHM0r68wmhs3FuhkfKB-H9irDGb5YbxWm0MZ7Pp9jk-JVW4A/viewform?embedded=true" width="640" height="947" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

Manually creating the code allows you to fine-tune all parameters like width, height, frameborder, etc.

Optimizing iframes for Speed

To optimize iframe page speed, I recommend:

• Setting media embed parameters in the URL

<iframe src="https://www.youtube.com/embed/12345?showinfo=0&controls=0&rel=0">
</iframe>  

• Adding loading="lazy" to load iframes only when in viewport

• Enabling iframe lazy loading in your caching plugin

These tips will minimize the impact of iframes on your site speed.

Final Thoughts

Iframes can be great but also have pitfalls. Ensure your implementation doesn‘t negatively impact user experience.

• Test iframe appearance on mobile
• Watch out for content overlap
• Check for errors in the console
• Monitor page speed and loading times

Often, going without iframes is the best approach. Evaluate whether the pros outweigh the cons for your specific goals.

I hope this guide has provided a thorough overview of working with iframes in WordPress. Let me know if you have any other questions!