What is iFrame, what are the attributes, when and how to use it – WAU
iFrame is an HTML tag used to insert external content on a page. Its configuration is made through a series of attributes, being possible to use it manually, through embedding in the page or through a WordPress plugin.
Have you heard about iFrame, or Inline Frame? It is a tag HTML which, when used in a page, allows the insertion of another page in that element. It is used to insert a series of objects into a frame, such as videos, banners, file previews and much more.
IFrame is a powerful resource and offers numerous possibilities for use. A good example of its use is the YouTube videos spread over the most diverse pages on the internet. However, care must be taken when using this feature, as it can cause some problems on the page.
In this post, we will show:
What is an iFrame and what is it for?
Basically, iFrame is a tag or tag in an HTML document which makes it possible to include another HTML document within the first. In other words, it allows, from a home page, to be able to open a section of any other page. For this, the HTML tag must contain information about how the content will be presented.
With this feature it is possible to upload only a specific document from another site or even the entire site. When the iFrame is created on a page, it is as if it opened a new window to access the other page, only within the original environment.
One of the advantages of its use is that it avoids copyright issues, since its use is not considered a violation. In addition, site visitors do not have access to that content to, for example, make a copy.
Another advantage is that it eliminates the need to store large files on the hosting server, which could compromise the space available for storage and even the speed of accessing the page.
When to use an iFrame?
exist several features for iFrame. It is very common for a page to embed videos from other sites, such as YouTube. They are easily included through the use of an embeb code, which is nothing more than the incorporation of the video using the iFrame tag with the data referring to the content to be shared.
Another common practice on websites is the exchange of banners, especially between partner companies that exchange recommendations with each other. Therefore, instead of distributing the banner itself, an iFrame is used, requesting it from the original page. The great advantage in this use is that if the website owner changes the image, it will be updated everywhere that access it.
The element can also be used to embed news feeds on a website. This is a widely used resource, for example, to list the latest blog posts and social networks. Another utility is to display the company’s location on geolocation sites, such as Google Maps.
Care must be taken when using the iFrame. One of the problems caused by its use is that the page is no longer indexed by search engines, such as Google. This is because crawlers cannot identify the iFrame code, which can cause the entire page to stop being indexed.
That is why, it is important not to abuse this resource, especially on pages that are relevant to a Digital Marketing strategy, as the lack of indexing can undermine all the effort made to achieve a good ranking.
Another concern with this feature is regarding the vulnerability. When using the tag on a website that does not have adequate security, it is possible to suffer some type of virtual attack. That’s because hackers take advantage of this facility to modify the original code and redirect users to malicious websites.
There is also the possibility that iFrames are targets for exploits, that is, because there is no security, a hacker can send specific programs or commands that are able to invade the system and infect the computer.
Thus, it is necessary to know how to create a website that has adequate security so that the resource is used with the minimum of risks for users. One way to prevent possible attacks is to always keep the environment up to date and use links from known and trusted sites.
What are the attributes of iFrame?
The iFrame, like all HTML tags, contains a series of attributes that serve to assign specific characteristics to the element. Basically, iFrame works with the following specification:
However, it contains other elements that we will list below:
- align: determines what will be the content alignment, which can be left, right, top, middle and bottom;
- frameborder: specifies whether or not there will be a border around the iFrame – its values correspond to 0 for no or 1 for yes;
- height: is the value in pixels referring to the height of the frame;
- sandbox: enables a series of restrictions on iFrame content, such as allow-forms to allow forms, allow-popups, allow-scripts, among others;
- scrolling: determines whether the element will display the scroll bar or not – its values can be yes, no or auto;
- src: represents the URL of the page that will be inserted in the iFrame;
- srcdoc: represents HTML content of the page to be inserted in the iFrame;
- width: determines the width of the frame.
How to use iFrame on the website?
The use of iFrame on the website is very simple. There is the option to insert the corresponding code manually, embedded or through plugins in WordPress. Next, we’ll demonstrate how to use the feature in all of these ways.
Enter the code manually
To enter the code you need use the corresponding opening and closing tags, as shown in the previous image. However, to use the iFrame it is necessary to observe some limitations.
When inserting any content from another site, it is necessary to observe what the Hypertext Transfer Protocol is, as it must be the same on both sites. This means that if the site uses the HTTP protocol, it will only be possible to insert content from sites that also use this feature.
Another caution is that some sites do not allow their content to be inserted in iFrames on other sites. In this case, when trying to use the feature, an error message will be displayed to inform you that the content cannot be embedded. Check out an example of how to insert a page manually on the website:
Another way to insert external content on the page is through a code for embedding. There are sites that do not only allow copying the URL as it is done manually. In that case, they provide a code to be embedded in the page.
There are basically two ways to enter the code. The first is to go to the page that contains the content to be incorporated. In this example we are going to use a YouTube video. Therefore, after selecting the desired video, right-click on the video and click on the alternative “Copy embed code”.
Then, go to the HTML code of the page where the video will be inserted and paste the copied content. Check the result.
There is also the possibility to embed the content through the functions of WordPress. To do this, in the post or page editor, click on “Add blocks”> “Embedded codes”.
Then, choose among the available alternatives, where the content originates.
The next step is to inform the address of the content. And, to conclude, click on “Embed”.
There are also free WordPress plugins that do this task with ease, like Advanced iFrame. Download and install the plugin on the CMS and, on the Dashboard, click on the “Advanced iFrame” option and select the “Basic Settings” tab.
In the “URL” field, enter the address of the website that will be incorporated into the iFrame. It is important to say that sites that have restrictions on the use of the element do not work with the use of plugins. In such cases, it is necessary to make the incorporation as mentioned in the previous topic.
Along the page are all the tag attributes that can be configured according to the need for use.
The next step is to click on the button “Generate a shortcode for current settings” and copy the generated code.
Finally, go to the post or page where you want to insert the iFrame and paste the copied text.
IFrame is an HTML tag which can be used to insert different types of external content on a page. However, it should be used sparingly, in addition to following the recommended safety precautions, such as keeping the site up to date and inserting content only from trusted sites.
Did you like our content on how to insert external content on the site? So, how about increasing your WordPress knowledge? Get to know WAU University’s free WordPress course!