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.
- Find the post you want to embed and click the … menu.
- Click Embed
- Copy the code that appears.
- Find the song you want and click the … menu
- Click Copy Song Link
- Go to the official Spotify Play Button generator and paste the link into the second field
- Copy the iFrame code from the third field
You can also do this with playlists in the same way:
- Find your map then click the Share button
