Html iframe border size

HTML Iframes

HTML Iframes: tag used to display the nested webpages (i.e. a webpage within a webpage). And we can define the iframe by enclosing them as . Moreover, the HTML iframes are embedded in another document within the current HTML document in the rectangular region.

HTML Iframes

The webpage content and iframes content can interact with each other using javascript.

“src” attribute specifies the web address (URL) of the inline frame page.

HTML Iframe Height and Width

You can set the height and width in HTML Iframe by using “height” and “width” attributes. But default the values of the attributes are specified in pixels but you can also set them in percentage format i.e. 50%, 60%, etc.,

Example: Pixels

   
HTML Iframes example
 
Use the height and width attributes to specify the size of the iframe:
   

Example: Percentage

   
HTML Iframes
 
You can use the height and width attributes to specify the size of the iframe:
   

Example: You can also use CSS to set height and width attributes

   
HTML Iframes
 
Use the CSS height and width properties to specify the size of the iframe:
   

Remove Border of Iframe

You can remove the border by using attribute and CSS property.

   
Remove the Iframe Border
 
This iframe example doesn't have any border
   

Change size, Color & Style of Iframe Border

   
Custom Iframe Border
   

Attributes of Iframes

Attribute Name	Value	Description
allowfullscreen	If it is true then the frame will open in fullscreen
height	pixels	Defines the height of the embedded iframe whereas the default height is 150px
name	text	gives the name to iframe
frameborder	1 (or) 0	defines whether iframe should have a border (or) not
width	pixels	defines the width of the embedded frame and default width is 300px
src	URL	used to give pathname (or) file name which content to be loaded into the iframe
sandbox	tm_wday	used to apply extra restrictions for the content of the frame
srcdoc	used to show the HTML content in the inline iframe. And also overrides the src attribute
scrolling	indicates that the browser should provide a scroll bar for the iframe (or) not

HTML Tutorial Tutorial

• HTML Introduction
• HTML Tags
• HTML Elements
• HTML Attributes
• HTML Formatting
• HTML Id Vs HTML Class
• HTML Phrase Tags
• HTML Images
• HTML Frames
• HTML Iframes
• HTML Tables
• HTML Lists
• HTML Links
• HTML Comments
• HTML Fonts
• HTML Backgrounds
• HTML Blocks
• HTML Colors
• HTML Classes
• HTML CSS
• HTML JavaScript
• HTML Forms
• HTML Form Elements
• HTML Form Input Attributes

Search This Website

Tutorials

• AngularJS
• AWS Tutorial
• Big Data Tutorial
• C Language Tutorial
• C++ Tutorial
• CSS Tutorial
• Ethical Hacking Tutorial
• Hadoop Tutorial
• HTML Attributes
• HTML Tags
• HTML Tutorial
• HTML5 Tutorial
• Java Category
• Java Programs
• Map Reduce Tutorial
• NodeJS Tutorial
• Python Tutorial
• ReactJS Tutorial
• Software Engineering

Free Mock Tests

• ★ RRB NTPC Stage 1 Mock Test
• ★ Banking Mock Tests
• ★ IT Software Mock Tests
• ★ SSC Mock Tests
• ★ Insurance Mock Tests
• ★ Accenture Mock Tests
• ★ Infosys Mock Tests
• ★ Tech Mahindra Mock Tests
• ★ Cognizant Mock Tests
• ★ HCL Mock Tests
• ★ Deloitte Mock Tests
• ★ TCS NQT Mock Tests

Preparation Materials

Jobs in India

Источник

HTML Iframes

An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax

The HTML tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax

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.w3schools.blog/" height="100%" width="60%">iframe> body> html>

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.w3schools.blog/" style="height:300px; width:400px">iframe> body> html>

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.

DOCTYPE html> html> body> iframe src="https://www.w3schools.blog" style="height:300px; width:400px; border:none;">iframe> body> html>

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.

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

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.

DOCTYPE html> html> body> iframe src="example.html" height="300px" width="400" name="iframe_example">iframe> p>a href="https://www.w3schools.blog/" target="iframe_example" rel="noopener">W3spoint.coma>p> body> html>

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.

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>

Click on the video to watch.

Explanation:

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

Iframe attributes:

Below are the various attributes used with an HTML tag.

Attribute	Value	Uses
allowfullscreen	TRUE/ FALSE	Used to open frame in full screen.
height	Pixels	Used to specify the height of the iframe (default height = 150 px).
name	text	Used to provide a name to the iframe.
frameborder	1 or 0	Used to specify whether an iframe should have a border or not.
width	Pixels	Used to specify the width of embedded frame (default width is 300 px).
src	URL	Used to to define the web address of the inline frame page.
sandbox	Used to apply extra restrictions for the content of a frame.
sandbox	allow-forms	Used to allow submission of the form which otherwise is blocked.
sandbox	allow-popups	Used to enable popups which otherwise will not open.
sandbox	allow-scripts	Used to enable the script to run.
sandbox	allow-same-origin	Used to treat the embedded resource as downloaded from the same source.
srcdoc	Used to show the HTML content in the inline iframe.
scrolling	Used to specify whether to provide a scroll bar for the iframe or not.
scrolling	auto	Used to display if the content of iframe is larger than its dimensions.
scrolling	yes	Used to always display the scroll bar for the iframe.
scrolling	no	Used to never display the scrollbar for the iframe.

Global Attributes:

The HTML GLobal attributes are supported by the HTML tag.

Event Attributes:

The HTML Event attributes are supported by the HTML tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Источник