Previous Next

Iframe

Embedding external content into your HTML pages is a powerful feature, and the <iframe> element is your go-to tag for this. It allows you to display another web page or resource within a dedicated area of your own document, perfect for maps, videos, and more.

Embedding External Content (<iframe>)

The <iframe> element creates an inline frame, embedding another HTML document into the current one. This is ideal for integrating content from different sources directly into your web page layout.

Example 1: Embedding a Google Map

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2800.707738209214!2d-122.90069398444766!3d47.03787407914849!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54911d3d63b2f913%3A0x6b8d4e9f7b4e7a8!2sWashington%20State%20Capitol%20Building!5e0!3m2!1sen!2sus!4v1678912345678!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Explanation This code snippet embeds an interactive Google Map directly onto your webpage. The src attribute contains the URL for the map, while width and height control its dimensions, ensuring a visually appealing integration.

Example 2: Embedding a YouTube Video

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Explanation Here, a YouTube video is embedded using its embed URL as the src. Attributes like frameborder and allowfullscreen provide control over the frame's appearance and playback options.

Example 3: Embedding Another Web Page

<iframe src="https://www.example.com" width="800" height="600" title="An Example Website"></iframe>

Explanation You can embed any accessible web page using the iframe element. This example loads https://www.example.com directly into the frame, useful for showcasing external content or resources.

Example 4: Sandbox for Security

<iframe src="untrusted-content.html" sandbox="allow-scripts allow-forms" width="500" height="300"></iframe>

Explanation The sandbox attribute enhances security by restricting what the embedded content can do. Here, it only allows scripts and form submissions, preventing potentially malicious actions from the embedded page.

Example 5: Responsive iframe with CSS

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
  <iframe src="https://player.vimeo.com/video/example" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

Explanation This advanced example uses a container div with CSS to make the iframe responsive. It ensures the embedded content, like a Vimeo video, scales gracefully across different screen sizes, providing an optimal viewing experience. Welcome to our HTML tutorial! Today, we're diving into embedding external content using the powerful <iframe> element. This element creates an inline frame, essentially embedding another HTML page or resource within your current web document. It's fantastic for integrating maps, videos from other platforms, and other web documents seamlessly.

Embedding External Content (<iframe>)

The <iframe> element allows you to embed content from another source directly into your webpage. This is perfect for integrating external services like maps or videos without hosting the content yourself.

Example 1: Embedding a Google Map

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2891.123456789!2d-122.9038209!3d47.0425333!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x549171e54457e5e3%3A0x6e7e4e1f7d5e4b7c!2sOlympia%2C%20WA!5e0!3m2!1sen!2sus!4v1678901234567!5m2!1sen!2sus" 
        width="600" 
        height="450" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy" 
        referrerpolicy="no-referrer-when-downgrade"></iframe>

Explanation This example demonstrates how to embed a Google Map directly into your webpage using the <iframe> tag. The src attribute contains the embed URL provided by Google Maps, and attributes like width, height, and style control its appearance.

Example 2: Embedding a YouTube Video

<iframe width="560" 
        height="315" 
        src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        referrerpolicy="strict-origin-when-cross-origin" 
        allowfullscreen></iframe>

Explanation Embedding YouTube videos is a common use for <iframe>. The src attribute points to the YouTube embed URL, and allow attributes grant permissions for features like autoplay and full screen.

Example 3: Embedding Another Web Document

<iframe src="https://www.example.com" 
        width="800" 
        height="600" 
        title="An Example Website"></iframe>

Explanation You can embed any accessible web page using <iframe>. The src attribute points to the URL of the external document, effectively displaying it as part of your current page.

Example 4: Embedding with sandbox for Security

<iframe src="untrusted-content.html" 
        sandbox="allow-scripts allow-forms" 
        width="400" 
        height="300" 
        title="Sandboxed Content"></iframe>

Explanation The sandbox attribute enhances security by restricting what the embedded content can do. Here, it only allows scripts and forms, preventing potentially harmful actions from the embedded page.

Example 5: Hiding the Iframe Border

<iframe src="my-internal-page.html" 
        width="100%" 
        height="400" 
        style="border:none;" 
        title="Internal Document No Border"></iframe>

Explanation The style="border:none;" attribute removes the default border around the <iframe>, allowing for a more integrated and seamless appearance on your webpage.