Web Development
Iframe in html

Iframe in html

Jeevan Henry Dsouza's photo
Jeevan Henry Dsouza
·

2 min read

Table of contents

Introduction

  1. <iframe> tag:

    • Stands for "inline frame."

    • It allows you to embed content from another web page or external source within your own web page.

    • Typically used for embedding videos, maps, social media widgets, advertisements, or any other external content.

    • The content displayed within the <iframe> is loaded from a different URL, and the browser treats it as a separate document within the main document.

    • The <iframe> tag requires a src attribute to specify the source URL of the content you want to embed.

    <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

Iframe Attributes

The <iframe> tag in HTML supports several attributes that allow you to customize and control the behavior of the embedded content. Here are some commonly used attributes:

  1. src: Specifies the URL of the content to be embedded within the iframe. Example: <iframe src="https://www.example.com"></iframe>

  2. width and height: Sets the width and height dimensions of the iframe. Example: <iframe src="..." width="500" height="300"></iframe>

  3. frameborder: Indicates whether to display a border around the iframe. Example: <iframe src="..." frameborder="0"></iframe>

  4. allowfullscreen: Allows the content within the iframe to be displayed in fullscreen mode. Example: <iframe src="..." allowfullscreen></iframe>

  5. sandbox: Enables a restricted sandbox environment for the iframe, restricting certain capabilities like scripts, form submission, and more. Example: <iframe src="..." sandbox="allow-scripts"></iframe>

  6. scrolling: Specifies whether to display scrollbars within the iframe when the content exceeds the iframe's dimensions. Example: <iframe src="..." scrolling="no"></iframe>

  7. name: Assigns a name to the iframe, which can be used as the target for form submissions or as the target attribute value for anchor links. Example: <iframe src="..." name="myFrame"></iframe>

  8. allow: Specifies a list of permissions for the content within the iframe, such as allowing autoplay, geolocation access, microphone usage, and more. Example: <iframe src="..." allow="autoplay; geolocation"></iframe>

iframe