How to embed WordPress iFrame: With and without using plugin

How to embed WordPress iFrame: With and without using plugin

Consider the number of times you’ve been on a website but came across content from a completely different website on their webpage. Whether its videos, images or portfolio pages, seeing them on a completely different website raises the question of ‘valid content sharing.’

Furthermore, if you own a WordPress website run my media content, you’ll have to deal with storage issues for your video/audio/image content at some point. Uploading videos, images and such content on your servers fill up space. There’s only so much hosting space available to you before it all runs out.

Whether its content sharing or storage space, these problems are solved by embedding the content of a separate website or domain on your posts and the easiest way to do it is using IFrames.

What is IFrame?

IFrames are used on almost every website and webpage these days and for a good reason. IFrames lets you create a medium to display content or web pages to and from a completely different website without having to worry about having the content stolen or copyright allegations.

The way IFrames basically work is that they let you display a different webpage on some portion of your own webpage by embedding it. The code inside an embedded webpage can’t be directly accessed which creates a certain sense of content protection.

Why should we use iFrame?

Obviously, there are other methods for embedding content such as using AJAX or HTML5 web elements or other, but in many cases, iFrame’s just a better choice. For one, iFrame embedding is used for Cross-Domain content, usually visual content. What this means is that a website user can freely request the selected resources from a separate website and view it but is restricted from accessing or manipulating the element or code itself.

Furthermore, you can easily place advertisements on your website using IFrames and set up multiple iFrames in a single webpage without a lot of difficulties. This is always useful if you want to monetize your website.

Embedding Visual Content using IFrames

iFrames are also used a lot for embedding visual and audio content. Whether its video or audio or images it’s a great idea to use iFrames to preview these content as you can easily host them on external servers and sources and easily link it without any difficulty.

This makes sharing your content easy as other website owners can also easily use your videos on their posts and furthermore, the viewership and web analytics are shared with you as well.

WordPress-Iframe-Demo-YTVid

Furthermore, uploading to third party websites such as Youtube, Vimeo, Dailymotion, etc. saves space while retaining accessibility.

How to embed iFrame in WordPress Without Plugin

Embedding  WordPress iFrame is easier than you imagine. The traditional way to do it is by using the HTML attributes <IFrame>.To do this, simply take the URL of the page you want to embed, and use it as the source for the Tag. Then, your code becomes:

 <iFrame src =”your_webpage_url”> 

Then, if you want you can add more parameters to your tag. You can define the window of the IFrame by using the params:

  • Width/Height– For height and Width of the iFrame window, define values in Px
  • Frameborder – For displaying or hiding the Frameborder, use values ‘0’ or ‘1.’
  • Align – For defining the window’s page alignment, Use values “left” “right” “right” “top” “bottom.”
  • Scrolling – For disabling or enabling Scrolling inside the Window. Use values “yes,” “no” or

Then simply paste your code into the text editor of your post on WordPress, and that should display your post easily. For example, we can just take the URL “https://themegrill.com” and use it as our source. And build a tag for our embedded page. Then using the added attributes for customization, we get,

 <iFrame src = “https://wordpress.org/plugins/ “ width= “50px” height=”300px” frameborder =”1” scrolling = “yes” align = “left”></iFrame> 

WordPress-Iframe-Demo-Code-Without-Plugin

This should give the result of:

WordPress-IFrame-Demo-Without-Plugin

 

Following this process, you should be able to easily embed any page on your posts. Whether its images, visual content, audio or more.

Furthermore, content websites such as Youtube have an in-built embedding feature for you to share the content. Simply click on Share and Embed and copy the given URL.

Embedding iFrames using Plugins

Now plugins can easily setup WordPress iFrames and add more customizations. Now we can’t explain the working method of each and every plugin but the basic idea should be universal, and most of the popular Embedding plugins should work in the similar process.

So regarding this, we’ve chosen this Advanced iFrame plugin by Michael Dempfle.

WordPress-Iframe-plugin-Advanced-iFrame

This plugin works by letting you inserting its [advanced_iframe] shortcode instead of the IFrame attribute and even providing a UI to build your customized iframe shortcodes. This is better as WordPress removes IFrame tags for security purpose. Furthermore, the plugin adds more customization to your tags and generally makes your work easier as well.

First, let’s install this plugin. If you aren’t sure about the process of installing plugins refer to here.

There are two ways to use this plugin, one directly by using the given parameters and another by using the plugin’s user interface.

1. Directly using the Shortcode:

The direct way of using Advanced iFrame is identical to using the iFrame HTML tag, but instead we use its shortcode.

Once you open any posts, you should be able to see a ‘Add Advanced iframe’ button.

Click on the button and it should insert a default iFrame shortcode onto the editor.

WordPress-Iframe-with-plugin-Demo-Code

If any settings haven’t changed, the default shortcode should be:

 [advanced_iframe src="//www.tinywebgallery.com" width="100%" height="600"] 

This default iFrame url and settings can be changed through the settings UI of the plugin but we will deal with that later.

For now, we can simply change the source url to any website we need and change the parameters of the shortcode similar to how we add parameters to an iFrame HTML tag.

The parameters(whose functionality and usage is also identical to the HTML tag parameters) provided are:

  • Width/Height– Values are in Px or percentage
  • Scrolling– Values are “yes” or “no.”
  • Frameborder – Values are defined with “0” or “1”
  • Margin height/width– for defining the height and width of the margin
  • Allowtransparency– for enabling or disabling transparency of the frame

So let’s change some of the parameters and add a few more.  For this example let’s build our shortcode as:

 [advanced_iframe src="https://themegrill.com" width="500px" height = "500px" frameborder="1" scrolling="no" allowtransparency=”yes”] 

Your saved post with the shortcode should display the iFrame window as:

WordPress-Iframe-With-Plugin-DemoPv

2. By using the settings user interface:

The process of making shortcodes and adding parameters might be difficult for someone new to WordPress or HTML, so the developer has provided an easy to use UI to create our customized shortcodes.

First, click on the Advanced iFrame listing on the dashboard and direct yourself to the basic settings. This is the menu where you will be doing most of your work.

WordPress-IFrame-Demo-With-Plugin-Settings

There are multiple values to set up for various purposes. We will be explaining only the essential ones here:

  • URL: Insert the URL for the page you want to embed here. The plugin also checks if the URL is valid and allows iFrame embedding.
  • Width/Height: Here you can insert the dimensions for your iFrame window. You can insert the values in either pixel or percentage.
  • Margin width/height: Insert the margin’s height and width in their respective boxes.
  • Frameborder: You can enable, disable or define the border size of your iFrame. Inserting ‘0’ removes the frameborder.
  • Transparency: You can set the value ‘Yes’ or ‘No’ or ‘True’ / ‘False’ Enabling transparency makes the transparent and displays the background on it.
  • Allow Fullscreen: This is a feature for embedding videos which lets the video take over the entire screen. Enable or disable it using ‘True’ or ‘False’

Using these settings you can easily enable your iFrame window. The plugin also provides for tons of other features however we will not be going through them as it would make the entire process complex and difficult to explain.

Click on ‘Generate a shortcode’ once you are satisfied with the current settings. This generates a customized shortcode for you to copy and paste onto your posts.

WordPress-Iframe-Demo-Code-With-Plugin-Shortcode-generate

Similarly, if you want the current settings to stay as your default settings, you can click on Update Settings displayed on the bottom of the window to make it the default setup.

This lets you instantly access the current shortcode using the Add Advanced iFrame button we’ve explained in the step above. Similarly, reset settings resets the default the shortcode.

You can now save this shortcode and paste it into any of your posts or pages to render the iFrame window. Our current shortcode would look like this:

WordPress-Iframe-Demo-Code-With-Plugin-Shortcode-Pv

NOTE:

But do keep a short reminder that iFrames aren’t the all complete answer to sharing media. Here are a couple of tips to remember:

Always keep a major check on the number of iFrames you embed on a single webpage as too many iFrames can hamper your website’s loading speed as the require separate resources to load onto the page.

Also, a huge note of importance, always makes sure to only embed content from trustable websites. Hackers can easily place a malicious injection inside their embed and cause multiple kinds of issues for your website. So, be aware of what kind of content you are sharing

Concluding:

Now that you know how to use iFrames you are ready to go ahead and share cross-domain content. There are other ways to embed content as well, but iFrames are easily the best medium for beginners as they are extremely easy to set up.

There are also alternatives to the Advanced iFrame plugin and you are ready to experiment them if you want. As we’ve explained before, their working method should be identical.

Want to continue reading more about great additions to your WordPress website? Consider going through some of our other helpful articles:

mm

ThemeGrill Author

We are a team of SEO copywriters and editors who work both individually and in the team. ThemeGrill author is where one of the editors here is working on one project personally or editing the guest posts. Write us @themegrill_blog in Twitter and +ThemeGrillBlog on Google+.

2 thoughts on “How to embed WordPress iFrame: With and without using plugin

  • March 15, 2018 at 5:32 am
    Permalink

    Hey Author thanks for posting such relevant information. I think many of the people don’t know this strategy and I am sure this will really help all the website developers.

    Reply
  • March 21, 2018 at 10:34 am
    Permalink

    Wow!
    I just looking for the perfect I-frames for WordPress, and I love WordPress as a web development so it’s just a good information given here in the post that will help a lot of people, Thank You!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest