Ifreme

 

HTML iframes

HTML Iframe is used to display a webpage within a webpage. 

An HTML iframe embeds another document within the current HTML document in the rectangular region.

Set Width and Height of iframe

You can set the width and height of iframe by using "width" and "height" attributes. By default, the attributes values are specified in pixels but you can also set them in percent. i.e. 50%, 60% etc.

Example: 

  1. <!DOCTYPE html>    
  2. <html>    
  3. <body>       
  4. <p>Use the height and width attributes to specify the size of the iframe:</p>    
  5. <iframe src="https://www.onlinetvlive.ml" height="300" width="400"></iframe>    
  6. </body>    
  7. </html>  
Output:

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




Example: (Percentage ℅)

  1. <!DOCTYPE html>    
  2. <html>    
  3. <body>       
  4. <p>You can use the height and width attributes to specify the size of the iframe:</p>    
  5. <iframe src="https://www.onlinetvlive.ml" height="50%" width="70%"></iframe>    
  6. </body>    
  7. </html>    
Output:

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




Remove the border of iframe

By default, an iframe contains a border around it. You can remove the border by using <style> attribute and CSS border property.

Example:

  1. <!DOCTYPE html>    
  2. <html>    
  3. <body>    
  4. <p>This iframe example doesn't have any border</p>     
  5. <iframe src="https://www.onlinetvlive.ml" style="border:none;"></iframe>    
  6. </body>    
  7. </html>    
Output:

This iframe example doesn't have any border



You can also change the size, color, style of the iframe's border as per your choice. Let's see an example.

Example:

  1. <!DOCTYPE html>    
  2. <html>    
  3. <body>    
  4. <h2>Custom Iframe Border</h2>    
  5. <iframe src="https://www.onlinetvlive.ml" style="border:2px solid tomato;"></iframe>    
  6. </body>    
  7. </html>    
Output:

Custom Iframe Border


Iframe Target for a link

You can set a target frame for a link by using iframe. Your specified target attribute of the link must refer to the name attribute of the iframe.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.  <h2>Target for a Link</h2>  
  5. <iframe height="300px" width="100%" src="window.html" name="iframe_a"></iframe>  
  6. <p><a href="https://www.onlinetvlive.ml" target="iframe_a">JavaTpoint.com</a></p>  
  7. <p>The name of iframe and link target must have same value else link will not open a frame. </p>  
  8.  </body>  
  9. </html>  

Output:

Iframe - Target for a Link

click here

The name of iframe and link target must have same value else link will not open as frame.


[ Window.html ] output code:

<!DOCTYPE html>
<html>
<head>
	<style>

	p{ 
           font-size: 50px;
           color: red;
           }
</style>
</head>
<body style="background-color: blue;">
  <p>click on link to open new iframe. </p>
</body>
</html>

Embed YouTube video using iframe

You can also add a YouTube video on your webpage using the <iframe> tag. The attached video will be played at your webpage and you can also set height, width, autoplay, and many more properties for the video.

 steps to add YouTube video on your webpage:

  1. Go to the YouTube video which you want to add on your page.
  2. Click on the share button and then click on embed option.
  3.  which is displayed on the screen and add that code into your page.
  4. Change height, width, and other properties (as per requirement).

Example:

  1. <iframe width="560" height="315" src="https://www.youtube.com/embed/m0GrKMuK9IY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  3. <iframe width="560" height="315" src="https://www.youtube.com/embed/VcXQQX8CRFM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Output:

 


All Attributes of <iframe> tag

Attribute ValueInformation
allowfullscreenIf true then that frame can be opened in full screen.
heightPixelsIt defines the height of the embedded iframe, and the default height is 150 px.
nametextIt gives the name to the iframe. The name attribute is important if you want to create a link in one frame.
frameborder1 or 0It defines whether iframe should have a border or not. (Not supported in HTML5).
WidthPixelsIt defines the width of embedded frame, and default width is 300 px.
srcURLThe src attribute is used to give the path name or file name which content to be loaded into iframe.
sandbox
This attribute is used to apply extra restrictions for the content of the frame
allow-formsIt allows submission of the form if this keyword is not used then form submission is blocked.
allow-popupsIt will enable popups, and if not applied then no popup will open.
allow-scriptsIt will enable the script to run.
allow-same-originIf this keyword is used then the embedded resource will be treated as downloaded from the same source.
srcdocThe srcdoc attribute is used to show the HTML content in the inline iframe. It overrides the src attribute (if a browser supports).
scrolling
It indicates that browser should provide a scroll bar for the iframe or not. (Not supported in HTML5)
autoScrollbar only shows if the content of iframe is larger than its dimensions.
yesAlways shows scroll bar for the iframe.
noNever shows scrollbar for the iframe.

Let's go to the next page.

Comments

Post a Comment

Popular posts from this blog

Image
HTML File Paths An HTML file path is used to describe the location of a file in a website folder. File paths are like an address of file for a web browser. We can link any external resource to add in our HTML file with the help of file paths such as images, file, CSS style sheet file, JavaScript file, video, etc. The src or href attribute requires an attribute to link any external source to HTML file. Different types to specify file paths: <img src="picture.jpg">  It specifies that picture.jpg is located in the same folder as the current page. <img src="images/picture.jpg">  It specifies that picture.jpg is located in the images folder in the current folder. <img src="/images/picture.jpg">  It specifies that picture.jpg is located in the images folder at the root of the current web. <img src="../picture.jpg">  It specifies that picture.jpg is located in the folder one level up from the current folder. There are two types...
Read more
Tags of HTML With description Basic HTML Tag Description <!DOCTYPE> Defines the document type <html> Defines an HTML document <title> Defines a title for the document <body> Defines the document’s body <h1> to <h6> Defines HTML headings <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a thematic change in the content <!–…–> Defines a comment Formatting Tag Description <acronym> Not supported in HTML5. Use <abbr> instead. Defines an acronym <abbr> Defines an abbreviation or an acronym <address> Defines contact information for the author/owner of a document/article <b> Defines bold text <bdi> Isolates a part of text that might be formatted in a different direction from other text outside it <bdo> Overrides the current text direction <big> Not supported in HTML5. Use CSS instead. Defines big text <blockquote> Defines a section that is quoted from another s...
Read more