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.
Example:
<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
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.
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).
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.
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.
Some of the popular Embed blocks available by default on WordPress are
- Google Calendar
- YouTube
- Spotify
- WordPress
- Vimeo
- Flickr
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.
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.
