How to Add iFrames to WordPress

Inserting iFrames into WordPress posts gives you amazing flexibility, and doesn’t even require a plugin. Today we’re going over the basics on how to create your own.

What is an iFrame?

HTML iFrames are a powerful tool you can use to embed other websites inside your WordPress posts. Say you run a Youtube channel for your company, and you want to put a video in the middle of a blog post. An iFrame is a simple way to embed that video, rather than having to host it on your WordPress. This has the advantage of faster load times and a more familiar interface for users, and also helps you build up views on your YouTube channel. 

It’s not just YouTube: other common choices are Facebook, Spotify, and Google Maps, but you can embed almost anything into your WordPress posts using an iFrame. You can even embed another WordPress into your WordPress and embed a WordPress into that WordPress and—

You get the point.

It’s iFrames all the way down

Creating a Manual iFrame

Even if you have a very basic HTML background, this is fairly simple. Take the following code:

<iframe src=”iFrameContentsGoHere.com”></iframe>

and put the target link in there. You can also specify the size of the iFrame using width=”x” and height=”x”. So for example, I put this iFrame linking to our Unify CMS page into my personal blog: 

<iframe src=”https://www.codeclouds.com/unify-cms/” width=”700″ height=”700″></iframe>

And this happens: 

Easy. 

Putting iFrames Into WordPress

You may have noticed a missing step: how did I get Unify CMS into WordPress. Don’t worry, that’s also very easy. Create or edit a post, then select the dropdown menu on the top-right. By default you’re using the Visual Editor. You want to switch to the Code Editor, then write/copy the iFrame HTML into there. 

Getting an Embed Link 

Many websites don’t allow you to create your own iFrames, and require you to get a link from their site. If an iFrame you’ve created manually is refusing to display, that’s probably the issue. Sites that appear frequently in iFrames will often do this so they have more control over how their content displays.  Let’s look at how to get the code from some of the more common sites.

1) navigate to Share on the toolbar below the video. 

2) click Embed

3) this will display the iFrame code. Ctrl+C/Command+C or simply click Copy and you’ve got it.

1. Find the post you want to embed and click the … menu.
2. Click Embed

3. Copy the code that appears. 

1. Find the song you want and click the … menu
2. Click Copy Song Link

3. Go to the official Spotify Play Button generator and paste the link into the second field
4. Copy the iFrame code from the third field 

You can also do this with playlists in the same way:

1. Find your map then click the Share button 

2. In the box that appears, click the Embed a Map button

3. Copy down the link from the field that appears. 

Here’s a quick example I put together.

1. I created a specific Google Map
2. I went share → embed and copied the link
3. In WordPress, I went More Options → Code Editor
4. I copied the embed code into WordPress

And voila: 

A blog post with an embedded Google Map. It took me 30 seconds. It’s a pretty simple example, but hopefully you can see how powerful and versatile iFrames can be for your business. 

Unless you’re really struggling with the above, I do not recommend installing a plugin. Most of them rely on shortcodes (which require a very similar level of technical know-how to doing it manually) and it’s important to remember you should try to keep the number of third-party plugins on your site as low as possible. Plugins offer a lot of flexibility and power, but they can also be a huge drain on performance and they can create serious security issues; untrustworthy plugins are one of the main ways that attackers compromise WordPress sites.  

That’s not to say never use plugins, but it’s important to weigh up the quality of life improvements they’re getting you versus the potential risks. WordPress Core can handle iFrames well enough that it doesn’t need any extra help. Unless there’s some very specific functionality to a particular plugin that is crucial to your site’s UX, it’s probably best to just do it yourself. 

Maybe you’re looking to do something a little more involved than a simple iFrame. If you want a professional team to take your WordPress or WooCommerce page to the next level, CodeClouds have a team of over 200 professional WordPress experts you can hire. Drop us a line today!