If you’ve ever wondered how to embed maps, videos, social media feeds, or other valuable elements onto your own website, the answer lies in a technology called “iFrames.”
These ingenious tools make it remarkably simple to share and display external content within your web pages, opening a world of possibilities for web developers and site owners.
This guide will help you understand:
- What is an iframe?
- How to use HTML iframes on your WordPress website?
- Why and how you should secure your iframe website?
What is an iframe?
An iframe (short for inline frame) is a webpage element that enables cross-site content sharing. It lets website owners add visually appealing content to their websites and give context to their posts.
When you see embedded YouTube videos and other content on websites, the web designer most likely inserted an iframe element within that webpage.
An HTML iframe is an embedded HTML document within a webpage. It is like having another browser window inside of your webpage. The document may contain CSS (Cascading Style Sheets) or JavaScript, which loads when the iframe tag is parsed successfully by the user’s browser.
Several third-party websites, such as YouTube and Google, use iframes in their embed code. You can put their iframe codes into an iframe element on your website.
Here’s what an iframe is as HTML code:
<iframe src=”URL”></iframe>
The src attribute specifies the source URL (Uniform Resource Locator) for the content that will be in the iframe element.
Pro Tip: Visitors will read the iframe’s content, so always include a title attribute for the iframe.
<iframe src=”URL” title=”description”>
What is an HTML iFrame used for?
Now you know what an iframe is — let’s explore what they can be used for. iFrames are the only cross-site content browsers to provide separate HTML components.
HTML iframes also empower you to:
- Embed useful resources from external websites on yours.
- Host videos and other media on your website without using up your storage space and bandwidth.
- Prevent copyright infringement. Embedded content maintains its connection to the website you sourced it from.
- Make it easier for website visitors to find your business’s physical location. Google Maps’ iframe code lets you display a map to your location on your website.
- Create display advertisements. Ads can be more engaging with a fully embedded HTML document.
- Keep your website’s embedded content up to date. The iframe is automatically updated with every change made to the original content.
What an iframe is used for does not end with this list. Many developers use iframes for remote scripting, a process that allows for data exchange between a client-side and server-side application without reloading the page.
iFrame tag attributes
The HTML <iFrame> tag denotes an inline frame. The following are the attributes used and their meanings.
| Attributes | Value | Description |
| allow | Denotes a feature policy for <iframe> | |
| allowfullscreen | truefalse | True, if <iframe> can activate fullscreen mode using Fullscreen API |
| allowpaymentrequest | truefalse | True, if an origin <iframe> is allowed to invoke Payment Request API |
| height | pixels | Defines the height of <iframe>. The default height is set to 150 pixels |
| width | pixels | Means the width of <iframe>. The default width is set to 300 pixels |
| sandbox | Allow-formsAllow-pointer-lockAllow-popupsAllow-same-originAllow scriptsallow-top-navigation | Defines a list of features that should be allowed or restricted for the content in <iframe> |
| src | URL | Defines the address of the page to put in the <iframe> |
| srcdoc | HTML_code | Defines the HTML content of the page to show in <iframe> |
| loading | eagerlazy | Defines whether a browser should immediately load <iframe> or defer loading until certain conditions are met |
| name | text | Defines the name of an iframe |
| referrerpolicy | no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originsame-originstrict-origin-when-cross-originunsafe-url | Defines the referrer information to be sent when retrieving the iframe |
There are more iframe tag attributes, like:
frameborder: Set to 1 (which is by default) if the browser should draw a border between this <iframe> and others. Set to 0 to remove the border.
But this is no longer in use as border: none; in your CSS gives a better effect.
Some additional attributes are no longer supported in HTML5, an updated version of HTML with new and better functionalities.
What browsers support iFrame?
All modern browsers support the HTML iframe element, including:
- Google Chrome
- Internet Explorer
- Mozilla Firefox
- Safari
- Opera
How to embed an HTML iFrame in WordPress
Most websites use WordPress as their content management system (CMS). So, for most website owners, here are three easy ways to create an iframe on your website.
Add an iFrame by embedding the source code
Several popular websites, like YouTube, offer iframe code you can embed on your website to display their content.
To embed a YouTube video on your website:
1. Go to the video you want to add to your website and click on the Share button.
2. Choose Embed from the popup that shows.
3. A box will appear. You will see what an iframe is in HTML. Scroll down and check the boxes for “Show player controls” and “Enable privacy-enhanced mode.”
4. Copy the iframe code. You can use the copy button.
5. Paste the code on your website. You can add it to an existing page or create a new page by clicking Pages > Add New on your WordPress dashboard.
6. Add an HTML block.
7. Paste the iframe code from YouTube into the block.
8. Preview your page and verify the new content is properly embedded.
9. Publish your changes.
Add an iFrame with a WordPress plugin
With the iframe plugin, you can embed content without an HTML iframe code. You don’t have to figure out what an iframe is supposed to look like in HTML.
1. Install the iframe plugin on WordPress. Once activated, the plugin will begin to function (no setup required).
2. Add a new page or go to an existing post.
3. Add a shortcode block.
4. Input the shortcode below to add an iframe. Include the source URL of the content to be embedded.
[ iframe src=”URL goes here” ]
5. Preview and publish your new iframe content.
Manually create and embed the iFrame code
If you don’t want to use a plugin, you can manually create the HTML iframe code and embed it on your WordPress blog.
1. Go to the WordPress editor and add an HTML block
2. Input this code in the HTML block:
<iframe src=”URL goes here”></iframe>
3. Include the source URL of the content to be embedded where it says “URL goes here.”
You can include additional attributes to the iframe tag. Use standard height and width sizes (300p high, 600p wide) to confine the iframe to a small space:
<iframe src=”URL goes here” width=”600” height=”300”></iframe>
How to make an iFrame responsive
As more visitors are scrolling through your website, you should ensure that all your browsing interfaces are responsive. They need to function properly on different devices and screen sizes.
How do you ensure an HTML iframe embedded on your webpage is responsive?
Here are the steps:
1. Paste the iframe embed code into your HTML page.
2. Set the height and width attributes of <iframe> to 100%.
3. Change the CSS position of <iframe> to absolute. Set the CSS parameters (left and top) to 0.
4. Add a div around <iframe>. The value of the padding-bottom parameter depends on the content’s aspect ratio.
For instance, a 16:9 video will be 9/16 which equals 0.5625.
When it’s responsive, this is what an iframe is in html code:
<div id=”Container”
style=”padding-bottom:56.25%; position:relative; display:block; width: 100%”>
<iframe id=”BluehostIframe” width=”100%” height=”100%” src=”https://www.youtube.com/embed/tAUf7aajBWE”
frameborder=”0″ allowfullscreen=”” style=”position:absolute; top:0; left: 0″></iframe>
</div>
Possible security threats from iFrame use
iFrames can raise security concerns from website owners. But the iframe element itself does not pose security risks for websites.
However, the nature of what an iframe is makes it possible for computer viruses to infiltrate through the code that embeds it on your website. These viruses can hack your site, install a virus to your audience’s computer, or steal delicate information.
To avoid security issues, it is crucial that you only embed iframe code into your website if it is from a reliable, secure source.
HTML iframes can also affect your website’s performance if embedded content takes a long time to fetch from its source URL. The speed problems are worse when you use multiple iframes on a single webpage.
If you must add several iframes (maybe on an informative post), utilize the load attribute. Lazy loading allows the iframe to load after the visitor reaches the page, which reduces load time.
<iframe src=”URL” loading=”lazy”></iframe>
iFrames can also affect search engine optimization (SEO). They are harder to index than plain HTML texts, so Google recommends avoiding iframes on your website.
But, if you add text-based links to the iframe, Googlebot can read them better, improving your search engine ranking.
It’s safer to develop your website without iframes, so you shouldn’t make them an integral part of your website. However, if you’re cautious, you can use iframes to get excellent results.
An iframe is one of the best ways to embed content on a website. If that content is from trustworthy websites, responsive, and used sparingly, HTML iframes can boost your marketing efforts with increased traffic and engaging content. Ready to optimize your WordPress website for improved speed, security, and marketing performance? Check out our managed hosting solutions today.
Enhancing web interactivity with iFrames
In conclusion, an iFrame, short for “inline frame,” is a versatile web technology that allows web developers to embed content from one website within another seamlessly.
This powerful tool serves various purposes, from displaying external content like maps, videos, or social media feeds to incorporating secure payment forms.
iFrames offer a unique way to enhance user experience and functionality, making websites more interactive and dynamic.
Common questions about iFrames
HTML is a language for creating web pages. iFrame is an HTML element used to embed another document within a web page.
iFraming a site without permission can infringe on copyrights or terms of service. Always seek consent and check the site’s “robots.txt” or terms.
Both embed content, but while “iframe” can embed any web content, “embed” is typically for media like videos, audio, and interactive media.
Check the HTTP headers for X-Frame-Options. If it’s set to “SAMEORIGIN” or “DENY”, iFraming is restricted. Also, consult your website’s backend settings or documentation.
