It is easier than you think to surf the web and embed the useful content you find on your website. You just need to understand iframes.
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 makes it easy to share useful media and other resources from external websites to yours. With iframes, you can add content which further explains a topic to your audience.
This guide will help you understand:
- What an iframe is
- How to use HTML iframes on your WordPress website
- Why and how you should secure your iframe website
What Is an iFrame?
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:
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 Tag Attributes
|allow||Denotes a feature policy for|
|allowpaymentrequest||truefalse||True, if an origin|
|height||pixels||Defines the height of|
|width||pixels||Means the width of|
|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|
|src||URL||Defines the address of the page to put in the|
|srcdoc||HTML_code||Defines the HTML content of the page to show in|
|loading||eagerlazy||Defines whether a browser should immediately load|
|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
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
What Is an HTML iFrame Used For?
Now you know what an iframe is — lets 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.
How to Embed an HTML iFrame in WordPress
A majority of 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.
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:
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:
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
3. Change the CSS position of
4. Add a div around
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:
style=”padding-bottom:56.25%; position:relative; display:block; width: 100%”>
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.
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. As long as 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.