The iFrame is a frame in which you can add or embed any website. You can iFrame on your WordPress site to showcase images, videos, audio, etc from another site easily. Using embedding you can save lots of storage space on your server without any compromise. Also, this reduces the time of downloading and uploading the content by adding content directly from the site. If you are not familiar with creating an iFrame on WordPress then follow the article to know all the possible ways to use iFrame and embed content on your WordPress website.

Ways to Embed iFrame in WordPress

There are five possible ways to embed iFrame on WordPress and they are

  • Add iFrames Manually
  • Use Embed Codes from the respective site
  • Using Plugins
  • Embed iFrames directly as Block
  • Using the Code Editor on WordPress

Add iFrames Manually

Adding iFrames manually on WordPress involves some code that you need to add along with the link of the embedding content. To do that

[1] Open any WordPress post.

[2] Hover your cursor to view the Add (+) icon and make a click.

[3] Type and choose Custom HTML.

custom HTML

[4] Write the iFrame HTML code in the block.

How to Embed iFrame in WordPress

Example:

How to Embed iFrame in WordPress
<iframe src="https://bing.com" height="400"></iframe>
<iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>
  • src – The source of the iFrame where you need to add the URL of the site or content that you need to embed on your site. It starts with https://
  • Width/Height – Width and height represent the size of the iFrame (pixel values)
  • Frame border – Used to set the frame border to your iFrame
  • Allow – This enables you to view your iFrame content in full screen
  • Scrolling – Enables scrollbars in your iFrame, by including the values such as “yes”, “no”, or “auto”
  • Align – Used to align the iFrame in the left, right, top, middle, and bottom of the webpage

[5] Once added you can preview the HTML code by clicking on Preview.

How to Embed iFrame in WordPress

[6] Now you have successfully embedded the content in iFrame on your WordPress site.

Use Embed Codes from the Respective Site

Some sites like YouTube, Facebook, Vimeo, etc. allow you to share videos by providing embed links, which you can directly copy and paste on your WordPress site to appear. If you need to do some edit on the embed code then make use of the custom HTML block to paste and edit the embed code.

[1] Open YouTube from your browser.

[2] Play any video you need to embed and click on Share.

embed

[3] From the Share tab, choose Embed.

copy

[4] You can make the changes to the code and even set the start time of the video to be played (if needed).

copy

[5] Click on Copy and paste the code on your WordPress site.

[6] The code will be pasted add as an Embedded URL on your WordPress website.

Also, you can just copy and paste the link of the video/content directly in the WordPress Site, as it will be added as an Embedded URL (Make sure you are copying the embed code).

After embedding in iFrame the content in your site looks like this

Using Plugins

You can also add iFrames using some plugins from the WordPress plugin store (Dashboard >> Plugins >> Add New).

How to Embed iFrame in WordPress

You can search and install any of the available plugins by clicking on Install Now. Once the plugin is added you can embed any content (image, video, etc.) on your WordPress site.

Some of the popular iFrame Plugins are

  • Advanced iFrame,
  • iFrame,
  • Embed iFrame,
  • Easy FancyBox, etc.
How to Embed iFrame in WordPress

Embed iFrames Directly as Block

If you are using the latest version of WordPress then you can add the embed block directly from the list of available services.

[1] Click on Add block (+ icon) at the top left near the WordPress icon.

[2] Scroll down to the Embed section.

[3] You can choose any of the content you like to embed from the list.

Embed blocks

Some of the popular Embed blocks available by default on WordPress are

  • Google Calendar
  • YouTube
  • Spotify
  • WordPress
  • Vimeo
  • Flickr
  • Pinterest
  • Facebook
  • Instagram

And a lot more.

Using the Code Editor on WordPress

If you are good at coding then you can directly embed iFrame content directly using Code editor or Ctrl + Shift + Alt + M.

code editor

Now you can add iFrames to your WordPress website by following any of the above-mentioned methods. If any content does not embed on your iFrame, then it is mostly because the site does not support embedding. If you have any doubts about adding iFrame leave a comment below.

For more useful WordPress tutorials and guides, follow our blog.

Would you like to receive notifications on latest updates? No Yes