<iframe> (short for inline frame) is an element used to embed another HTML document or webpage within the current document. It allows you to display external content, such as webpages, videos, maps, or other documents, within a designated area of the current webpage.

The <iframe> element creates a rectangular region within the document where the embedded content is displayed. The source of the content is specified using the src attribute, which can point to a URL or a local file.

Here's an example of using the <iframe> element:

<iframe src="https://www.betekie.com" width="500" height="300"></iframe>

 

Output

In the example above, the <iframe> element is used to display the webpage at "https://www.betekie.com" within the iframe. The width and height attributes set the dimensions of the iframe.

The <iframe> element also supports various attributes and options to control the appearance and behavior of the embedded content. Some commonly used attributes include:

  • src: Specifies the source URL or local file path of the content to be displayed within the iframe.
  • width and height: Sets the width and height of the iframe region.
  • frameborder: Specifies whether to display a border around the iframe. Use frameborder="0" to remove the border.
  • allowfullscreen: Enables the embedded content (such as videos) to be displayed in fullscreen mode.
  • scrolling: Controls whether scrollbars are displayed within the iframe. Use scrolling="auto" to display scrollbars as needed.

Here's an example with additional attributes:

<iframe src="video.html" width="640" height="360" frameborder="0" allowfullscreen scrolling="auto"></iframe>

 

In this example, the src attribute points to a local file named "video.html". The iframe has a width of 640 pixels and a height of 360 pixels, with no border, and scrollbars appearing as needed. The allowfullscreen attribute allows the embedded video (if any) to be displayed in fullscreen mode.

The <iframe> element provides a way to include external content within an HTML document while maintaining the separation between the embedded content and the surrounding webpage. It is commonly used for embedding videos, maps, social media widgets, advertisements, and other types of content from external sources.

Latest Tutorial

Newly published tutorials

Laravel 10 - Send mail using AWS SES

Learn to send Email using Laravel 10 with AWS SES service.

Laravel 10 - Tutorial to create CRUD Application

Learn to create crud application using laravel 10. Step by step guidance will help to understand the concept of crud.

Laravel 10 - Tutorial on how to use jQuery to validate the form

Learn how to use jQuery in Laravel 10 to validate the form