HTML Iframe
Written By: Avinash Malhotra
Updated on
Iframe Tag
The HTML <iframe> element is an inline element used to embed other webpages or external content within a page. It's commonly used to display content from another source without navigating away from the current page. Iframes are particularly useful for embedding YouTube videos, Google Maps, social media widgets, and other interactive content directly into your website.
In this tutorial, we'll cover the basics of iframes, their attributes, how to embed popular content like YouTube videos and Google Maps, and important security considerations.
<iframe src="https://www.techaltum.com"></iframe>
Iframe Attributes
Iframe includes many attributes to add properties like, src, width, height etc. Here is a list of attributes used in iframe.
| Attribute | Use |
|---|---|
| src | source of iframe |
| width | width of iframe |
| height | height of iframe |
| title | title for web accessibility |
| loading="lazy" | delay iframe loading if not in viewport |
| allow | allow features for iframe |
| allowfullscreen | iframe can open in fullscreen |
| name | name for iframe used to target on click of hyperlink. |
| frameborder | 0 to remove default border |
Iframe Security and Best Practices
While iframes are useful for embedding content, they can pose security risks if not handled properly. Here are some best practices to ensure safe and effective use of iframes:
- Use the sandbox attribute: Restricts the iframe's content from accessing the parent page or executing scripts. Example:
<iframe src="..." sandbox></iframe> - Always include a title attribute: Improves accessibility for screen readers.
- Avoid embedding untrusted content: Only embed content from trusted sources to prevent XSS attacks.
- Use HTTPS: Ensure the iframe source uses HTTPS to prevent mixed content issues.
- Consider alternatives: For videos, use the <video> tag or YouTube's embed API. For maps, use Google Maps API instead of iframes when possible.
- Responsive design: Make iframes responsive using CSS to ensure they work well on mobile devices.
Note: Iframes can impact page load performance. Use lazy loading and consider the overall page weight.
Target Iframe on Hyperlink
A hyperlink can open a webpage in iframe. To do this, name your iframe, and set target to hyperlink as iframe's name. If iframe name is frame1, hyperlink target should be frame1. See example below
<iframe name="frame1"></iframe>
<a href="img/img1.jpg" target="frame1">Link 1</a>
<a href="img/img2.jpg" target="frame1">Link 2</a>
<a href="img/img3.jpg" target="frame1">Link 3</a>
<a href="img/img4.jpg" target="frame1">Link 4</a>
Iframe is usually not recommended for these type of applications. Use JavaScript instead.
Embed Google Map in iframe
Iframes are also used to embed Google Maps on a webpage. This is a free service by Google Maps. To embed Google Maps in iframe, follow these steps
How to embed Google Map
- Open Google Maps.
- Click Left menu.
- Choose share or embed map
- In popup window, choose Embed a map.
- Choose the size of iframe.
- Copy iframe and paste on your webpage.
- Remove frameborder="0" from copied iframe.
- Save the code and open in browser.
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3503.575022750921!2d77.31301609999998!3d28.58252155000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sTech+Altum%2C+Naya+Bans+Village%2C+Sector+15%2C+Noida%2C+Uttar+Pradesh%2C+India!5e0!3m2!1sen!2s!4v1391062749471" style="width:100%; border:0" height="300"></iframe>
Embed youtube video in iframe
Like google map, a youtube video can also be embedded into iframe and publish on website. To embed a youtube video, follow these steps.
- Open youtube website.
- Click share button.
- Choose embed.
- Copy embed video code.
- Remove frameborder="0" from iframe.
- Change title
- Save the code and run.
Youtube Video Embedded in Iframe
Not all videos are allowed to be embedded. Only videos with permission will be allowed. Channels like music, movies, albums, and copyrighted content will not play in iframes.
Conclusion
Iframes are a powerful tool for integrating external content into your web pages, but they should be used judiciously. Always prioritize security, accessibility, and performance when implementing iframes. For modern web development, consider API-based alternatives when available for better control and integration.
Practice embedding different types of content and experiment with attributes to see how they affect the iframe's behavior. Remember to test your implementations across different devices and browsers for the best user experience.