CodeClouds Color Logo

WORDPRESS DEVELOPMENT | 06 January 2021

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

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.

What is an iFrame
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: 

Creating a Manual iFrame
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. 

Putting iFrames Into WordPress

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.

Youtube

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

navigate to Share on the toolbar below the video
2) click Embed

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

this will display the iFrame code
Facebook
  1. Find the post you want to embed and click the … menu.
  2. Click Embed
this will display the iFrame code
  1. Copy the code that appears. 
this will display the iFrame code
Spotify
  1. Find the song you want and click the … menu
  2. Click Copy Song Link
this will display the iFrame code
  1. Go to the official Spotify Play Button generator and paste the link into the second field
  2. Copy the iFrame code from the third field 

this will display the iFrame code
You can also do this with playlists in the same way:

this will display the iFrame code
Google Maps
  1. Find your map then click the Share button 
Find your map then click the <b data-src=

Originally written January 06, 2021. Last updated

 Views

Written by CodeClouds

CodeClouds provides effective and quality solutions for various web technologies. We have responsive and swift communication 18/5 and deliver quality development services around the globe.

  • facebook
  • twitter
  • linkedin
  • pinterest
  • whatsup
Related Articles
Coming Back from a Hack: A Guide to WordPress Security

WORDPRESS DEVELOPMENT | 23 December 2020

Coming Back from a Hack: A Guide to WordPress Security

Hackers and other malicious parties love to attack poorly-secured WordPress sites. If you don’t want to be one of their targets, read on.

7 WordPress Review Plugins That You’ll Give 5 Stars

WORDPRESS DEVELOPMENT | 12 October 2020

7 WordPress Review Plugins That You’ll Give 5 Stars

If you’re reading this, you probably went looking for the best WordPress site review plugins. Well you’re in luck, because you’ve come to the right place. Today we’re talking about the 7 best WordPress review plugins for your website or blog.