iframe

An iframe (inline frame) is an HTML element that allows embedding another HTML page within a web page. With iframes, you can display external content such as other web pages, videos, maps, and more as part of the parent page.

Key Features and Benefits

  1. Content Embedding:

    • iframes enable embedding content from other websites or different URLs into the current page. This allows users to access additional information or features without leaving the page.

  2. Isolated Environment:

    • The embedded page is independent of the parent page, preventing CSS and JavaScript conflicts. This helps avoid style or script interference.

  3. Support for Responsive Design:

    • You can specify the size of the iframe to ensure the embedded content adapts to different screen sizes.

Examples of Use

  1. Embedding YouTube Videos:

    • You can embed a YouTube video directly onto a webpage for users to play the video on the page.

    <iframe width="560" height="315" src="https://www.youtube.com/embed/example_video_id" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  2. Embedding Google Maps:

    • You can embed a Google Map to display the location of a specific place on your page.

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093745!2d144.95373631531682!3d-37.8162792797517!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577c2d9f5b93a1d!2sFlinders+St+Station!5e0!3m2!1sen!2sau!4v1510917683896" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

  3. Embedding External Web Pages:

    • You can embed other web pages to provide additional information or functionality.

    <iframe src="https://www.example.com" width="800" height="600" frameborder="0"></iframe>

Considerations

  1. Security:

    • Since iframes load external content, there can be security risks. Ensure that you only embed content from trusted sources.

  2. Browser Compatibility:

    • Some browsers may not display iframe content correctly. It's important to test iframes across major browsers.

  3. SEO Impact:

    • Content within iframes might be difficult for search engines to index. Important content should be embedded directly into the page when possible.

Summary

iframes are a useful tool for embedding external content into web pages, such as YouTube videos, Google Maps, and other web pages. They enhance the functionality and interactivity of a website. However, it is crucial to be mindful of security, browser compatibility, and SEO impacts when using iframes.

Related Glossaries