<iframe>

The HTML <iframe> element allows embedding an external HTML document within the current page, facilitating the integration of content such as videos or interactive elements.

`<iframe>` Tag

The <iframe> element is used to embed an external HTML document within the current page, allowing seamless integration of content like videos and interactive elements.

Syntax

index.html

<iframe src="URL" width="width" height="height" frameborder="border" allowfullscreen></iframe>

iframe Demo

Embedding Content with Style

The iframe element + CSS

Example of an iframe with default borders:

<p>An iframe with a thin black border:</p>
<iframe src="https://institute.qarpeo.com" width="100%" height="300" class="!border !border-red-600"></iframe>

<p>An iframe with no borders:</p>
<iframe src="https://institute.qarpeo.com" width="100%" height="300" class="!border-none"></iframe>

index.html

<h1>The iframe element + CSS</h1>

<p>Example of an iframe with default borders:</p>
<iframe src="/default.asp" width="100%" height="300">
</iframe>

<p>An iframe with a thin black border:</p>
<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>

<p>An iframe with no borders:</p>
<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>

The sandbox attribute can be used to add security restrictions, preventing unauthorized scripts from running within the embedded content.

Purpose and Functionality

The <iframe> element enables embedding external documents within a webpage, making it useful for integrating dynamic content, media, or other web applications.

CSS can be used to modify the appearance and behavior of the <iframe> as needed.

Essential Attributes

src: Defines the URL of the embedded page.
width & height: Sets the size of the iframe in pixels.
allow: Grants permissions for specific features, such as camera or microphone access.
allowfullscreen: Enables fullscreen mode for the embedded content.
loading: Controls when the iframe loads (eager or lazy loading).
sandbox: Restricts the iframe’s capabilities for security purposes.

Adding a title attribute enhances accessibility, making it easier for screen readers to describe the embedded content.

Default CSS Settings

By default, most web browsers render the <iframe> element with the following preset values.

style.css

iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}

The <iframe> element allows embedding external content, such as web pages or videos. It offers flexibility for integrating interactive elements without reloading the page. Key attributes include src for the embedded URL, width and height for size.

The <frameset> tag is used to define a collection of frames within a web page, allowing multiple HTML documents to be displayed simultaneously.

It seems there may be a misunderstanding or typo because there is no <fencedframe> element in HTML. If you're referring to something else, like <iframe> or another element.