Embed Iframe Tutorial

How to Embed a Web Page in HTML

Learn how to use the <iframe> tag to display another website inside your own.

What is an <iframe>?

An <iframe> (short for Inline Frame) is an HTML element that allows you to display another webpage inside your current page. It’s commonly used to embed content like YouTube videos, Google Maps, forms, documents, or even other websites.

Basic Syntax Example

Here’s what a basic iframe looks like in HTML:

HTML


            <iframe 
            src="https://example.com" 
            width="100%" 
            height="400"></iframe>

src: The URL of the page you want to display.
width and height: Set the visible size of the iframe on your page.

Customizing the Iframe

You can personalize the appearance and behavior of your iframe using several attributes:

width/height: Control the size in pixels or percentage.
style: Add custom CSS like rounded corners or box shadows.
frameborder: A legacy attribute to show/hide borders. Use CSS border: none; instead.
allowfullscreen: Allows the embedded content to go fullscreen (great for videos).
loading="lazy": Improves performance by loading the iframe only when it's in view.

Styled Example:

HTML

          <iframe 
          src="https://example.com" 
          width="100%" 
          height="500" 
          style="border-radius: 10px; border: none; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" 
          allowfullscreen 
          loading="lazy"></iframe>
        

Live Demo Section

Try it out! Below is a working example of an embedded web page.

Ready to Build More?

Learning how to use an iframe is just one step in your web development journey. Imagine what else you can build!

Explore More Tutorials

“Start with the basics and build something amazing. CodeNest is your cozy place to learn real coding skills step by step.”