CodesJava

Easy learning with example program codes

iframe HTML

HTML <iframe> Tag

To display a web page within a web page or a nested web page, the HTML <iframe> Tag are used. HTML Iframes are also known as Inline frames. As the name itself suggests, it defines an inline frame.

Syntax:

<iframe src="URL"></iframe>

Parameters:

  • src: It is an attribute used to specify the URL.
  • URL: It is used to define the web address of the inline frame page.

Set Height and Width:

To specify the size of the iframe, the height and width attributes are used. The size is defined in pixels by default.

Example: In Pixels.

<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.codesjava.com/" height="300" width="400"></iframe>
</body>
</html>

Output:

Explanation:

In the above example, we set the width and height of iframe in pixels.

Example: In Percentage.

<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.codesjava.com/" height="100%" width="60%"></iframe>
</body>
</html>

Output:

Explanation:

In the above example, we set the width and height of iframe in percentage.

Example: With CSS.

<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.codesjava.com/" style="height:300px; width:400px"></iframe>
</body>
</html>

Output:

Explanation:

In the above example, we set the width and height of iframe using CSS.

Remove the Iframe Border:

The style attribute and the CSS border property can be used to remove the default border present around an Iframe.

Example:

<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.codesjava.com" style="height:300px; width:400px; border:none;"></iframe>
</body>
</html>

Output:

Explanation:

In the above example, we removed the default border present around the Iframe.

Modify the Iframe Border:

The style attribute and the CSS border property can be used to modify the size, style and color of the default border present around an Iframe.

Example:

<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.codesjava.com/" style="height:300px; width:400px; border:4px solid crimson;"></iframe>
</body>
</html>

Output:

Explanation:

In the above example, we modified the default border present around the Iframe.

Target Frame for a Link:

To use an iframe as the target frame for a link, the specified target attribute of the link should refer to the name attribute of the iframe.

Example:

<!DOCTYPE html>
<html>
<body>
<iframe src="example.html" height="300px" width="400" name="iframe_example"></iframe>
<p><a href="https://www.codesjava.com/" target="iframe_example">CodesJava.com</a></p>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, the respective link opens in the iframe on clicking, since the specified target of the respective link matches the name of the iframe.

Iframe to Embed YouTube video:

To add a YouTube video on a webpage follow the below steps:

  • Open the YouTube video to embed.
  • Click on the SHARE video option and than on the Embed option.
  • Copy and paste the generated HTML code in the desired HTML file.
  • If required, modify the height, width, and other properties of the video.

Example:

<!DOCTYPE html>
<html>
<body style="color: crimson">
<iframe width="560" height="315" src="https://www.youtube.com/embed/m8hDA--txk4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  
<h2>Click on the video to watch.</h2>
</body>
</html>

Explanation:

In the above example, we embedded a YouTube video on a webpage.

Iframe attributes:

Below are the various attributes used with an HTML <iframe> tag.

AttributeValueUses
allowfullscreenTRUE/ FALSEUsed to open frame in full screen.
heightPixelsUsed to specify the height of the iframe (default height = 150 px).
nametextUsed to provide a name to the iframe.
frameborder1 or 0Used to specify whether an iframe should have a border or not.
widthPixelsUsed to specify the width of embedded frame (default width is 300 px).
srcURLUsed to to define the web address of the inline frame page.
sandboxUsed to apply extra restrictions for the content of a frame.
sandboxallow-formsUsed to allow submission of the form which otherwise is blocked.
sandboxallow-popupsUsed to enable popups which otherwise will not open.
sandboxallow-scriptsUsed to enable the script to run.
sandboxallow-same-originUsed to treat the embedded resource as downloaded from the same source.
srcdocUsed to show the HTML content in the inline iframe.
scrollingUsed to specify whether to provide a scroll bar for the iframe or not.
scrollingautoUsed to display if the content of iframe is larger than its dimensions.
scrollingyesUsed to always display the scroll bar for the iframe.
scrollingnoUsed to never display the scrollbar for the iframe.

Global Attributes:

The HTML GLobal attributes are supported by the HTML <iframe> tag.

Event Attributes:

The HTML Event attributes are supported by the HTML <iframe> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status