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.
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"> </iframe>
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>
This should give the result of:
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.
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.
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"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;allowtransparency=”yes”]
Your saved post with the shortcode should display the iFrame window as:
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.
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.
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:
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:
- How to add SSL and HTTPS to WordPress site.
- How to make a WordPress website multilingual.
- WordPress guide to setting up user roles and permissions.