Witnessing iFrame for the first time is a unique experience, it’s engaging and appealing at the same time. Can you even imagine some content appearing from another website or just one portion of a website.? That’s exactly what iFrame does.
Whether you’re a beginner or an advanced level programmer, you can embed iFrames in your website or just part of a video that might appear on your website.
A website with a WordPress CMS provides you with an option to upload content on their server. The problem arises when you upload high definition pictures or videos and their server overloads. And limited hosting demands you to buy more hosting space for your website.
So, whether it is content, images, videos, or anything that can take space, you can use iFrames to share things from another website and engage users on your website.
What is iFrame?
Majority of websites these days use iFrames for a valid reason. iFrames helps you develop a display on your website from another website without breaking the copyright allegations that the other website can create.
The way it works is that you will be shown a certain part of another website on your website. The code embedded by you gives you a sense of protection and eliminates such issues.
Why Is Using iFrame Important?
There are multiple methods in which you can embed content on a website. Using AJAX and HTML5 are common, but iFrame is always a smart choice.
Firstly, when you embed iFrame, it gives you an option to use cross-domain content or even visual content from another website. This means that you can view the content of other websites or portions of that website without worrying about any restrictions or changing the original content.
iFrames embedding can help you place ads on your site. Imagine a single website that can showcase various advertisements in every other frame. This helps to monetize the website.
How To Embed Audio, Video & Image Using iFrames?
Usually, iFrames are used to embed audio or video content. Since images, video, and even audio takes space on the server, it is wise to use iFrame and prevent any load on your server. Everything is already present on the external server; you are just embedding it on your website.
1 Platform to manage everything WordPress so you can focus on what matters.
Launch your first site for free
This makes content sharing easy and quick. You can even share your content on other websites and both the websites can share the analytics.
Moreover, you don’t have to upload it on a third party website like YouTube, Vimeo, or Dailymotion. It’ll save you time and space on your hosting website. When you embed from another website you are just using code to pick content from their website. There is no load on your server.
How To embed iFrame in WordPress Without Any Plugin?
Embedding iFrame on your website is easy. You don’t have to learn anything new to embed visual content on your website. Just a few changes, and you’ll be able to embed the code on your website.
Embedding an iFrame is simple. You just need to add the website URL between the iFrame tag. Here’s how you can do it:
<iframe src=”https://www.google.com”> </iframe>
You can be more creative, you can use more parameters with the tag. If you don’t want to use the full website, just a portion of the website, you can do that by defining the tag’s width and height.
To display the frameborder, you can use Px and values ‘0’ or ‘1’ to align the border.
The alignment can be adjusted using values ‘left, ‘right,’’ top,’ and ‘bottom.’
You can enable scrolling by the ‘yes’ value or disable it by the ‘no’ value. Check with a frame or without a frame whatever feels right for your website.
Once you are done with the code, paste it into a text editor and place it on your WordPress post. For instance, you can display part of a plugin, here is how the code will look like
<iframe src=”https://wordpress.org/plugins/” width=”80px” height=”200px” frameborder=”1″ scrolling=”yes” align=”left”> </iframe>
This will give you the website on an iFrame, or just a portion of the plugin will be shown. You can play with the parameters to choose the exact portion you are willing to display on the website.
Once you follow this procedure, you can easily embed a website or portion of a website on your website. Be it a video, an image, or specific content. You can share the analytics with the website.
And websites like YouTube, Vimeo, and other video sharing websites have an embed code available, which allows the videos to embed in your website.
How To Embed Anything With Plugins?
Now, there are tons of plugins that differently implement iFrame on your website. Every plugin operates differently. We are just using a simple plugin to embed whatever you want on your website for the sake of discussion.
We’ll use the Advanced iFrame plugin created by Michael Dempfle. This is one of the popular plugins used in the market. There are tons of others. You can pick and choose whichever feels right for you.
The plugin works simply. You just need to put [advanced_iframe] code replacing the iFrame attribute, and with that, you’ll be able to edit the code and customize the frame as per your need. The simple plugin gives you the ability to customize and makes your life easy.
Begin by installing the plugin. You can read installation instructions from here.
Now, there are two ways to use the plugin. Either use the plugins interface to make the changes, or you can use the parameters given by the plugin to make the necessary changes.
How To Use Shortcode?
The simplest way to make the changes in the Advanced iFrame plugin is to edit it using the shortcode.
Open any blog post or page and ‘Add Advanced iFrame.’
When you do that, a shortcode editor will be displayed where you can do the editing.
Initially you’ll see this shortcode:
[advanced_iframe src=”//www.tinywebgallery.com” width=”100%” height=”600″]
You can easily change the settings via the plugin’s UI settings, which we will discuss later.
Start by changing the default URL with the website that you are willing to display. To add options or change the default options, you need to edit the parameters of the iFrame.
The plugin parameters must be changed, and there will be changes in the iFrame you’ve used.
- Width/Height: Edit the values of Px or simply change the percentage.
- Scrolling: Either scroll with ‘Yes’ or don’t with ‘No.’
- Frameborder: As mentioned earlier, too, it’s ‘0’ for no border and ‘1’ for a simple border.
- Margin Height/Width: You can adjust the height & width of the margin with this parameter.
- Allowtransparency: You can enable transparency or disable it. You can easily choose whichever option fits best for your website.
Let’s edit the parameters & see how the iFrame is changed:
[advanced_iframe src=”https://themegrill.com” width=”800px” height = “800px” frameborder=”1″ scrolling=”yes”&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;allowtransparency=”yes”]
When you save the post, you will see the iFrame with the changes you’ve just made. You can play with the parameters, and the iFrame will display changes. Once you’re satisfied with the changes, you can make it a default code on multiple websites.
Using the User Interface of the Plugin
For novice users, it’s difficult to change the parameters. So, they should take help from the plugin’s user interface to make changes in the iFrame.
You can start by clicking on the Advanced iFrame listing present in the plugin settings dashboard. Once you get to the menu, it will be easy to work from then onwards.
You have multiple values there, when you edit you’ll note the changes in real-time.
- URL: Here, you’ll enter the URL from anywhere or whatever you need in the frame.
- Width/Height: You can choose whatever area you need to display in the iFrame, and based upon that, only some areas will be displayed. You can choose either the pixel value or the percentage value.
- Margin Width/Height: You can decide the margin for the iFrame.
- Frameborder: Choose whether you want the border with the frame or not. Here ‘1’ will add the border, and ‘0’ will remove it.
- Transparency: Here, you can set ‘Yes,’ ‘No,’ ‘True’ or ‘False’ values, which will either place a transparent display or show a little background to it.
- Fullscreen: You can either allow fullscreen for the frame or not. A fullscreen is usually used with videos. To enable, you need to choose ‘Yes,’ and to disable fullscreen, you can use the option ‘No’.
These settings will help you enable or disable certain features of the iFrame. The parameters are easy to understand, so you can easily explore them one by one.
When finished with the code, simply go to ‘Generate a shortcode,’ and a code will be generated for you. You can copy & paste this code to your page, and you’ll be welcomed with an iFrame of your desired website.
If you want your current settings as part of your default setting, you just need to click on ‘Update Settings,’ and all your settings will become the default setting.
Shortcode can be edited with the Add Advanced iFrame button. Once you reset the default settings on the code, you can add your shortcode and create the iFrame you need.
When you save this shortcode, you can use it anywhere whenever you want a full-page iFrame or just a window. You can choose whatever feels right for your website. You can customize the iFrame as per the need of your website.
But keep in mind that iFrames are not at all the replacement to media sharing on the website. Here are some reminders you need to focus on when you plan to use iFrames on your website.
- Don’t use excessive iFrames on one page as each iFrame will delay the website speed so that the website will open slowly. And eventually, affect the ranking of your website.
- If you are using a popular video, ensure that you credit the video. The same goes for the picture.
- Always embed code from a trusted website. Because when you embed from a trusted website, there is no chance to inject malicious content into your website. So, don’t just go and pick any code to embed on your website.
Closing Thoughts
Now, you’ve learned how to embed iFrames on your website, you can easily share cross-domain content on your website. You can embed content with various methods, but embedding iFrames is the simplest.
You can do that on your own, either by shortcode, or you can use any WordPress plugin to do that for you. For beginners, the latter option is relatively easy.
There are tons of alternatives available in the market other than Advanced iFrame.
You can check them out and pick the option that suits your purpose.
You can experiment with the iFrame code’s parameters and see whichever setting feels right for your website. Just ensure that whatever method you use, it should match the theme of your website. Because if you use an iFrame that doesn’t resemble the theme, it might create an awkward design.
Let us manage your WordPress Website and attain true peace of mind.
Scale your business today.
Sign up
