logo

HTML Iframe

HTML iframe is used to browse the other HTML files or other browsing content in a specified frame. It is an inline element.

Iframe can contain the following browsing content.

  • web page/website

  • image

  • youtube video

Web Page

We have to write the address of website or web page which we want to embed.

Example

<!DOCTYPE html>
<html>
<body>
  
 iframe can embed web pages
 <iframe src="files/value.html" ></iframe>
 iframe can embed website
 <iframe src="http://www.codingb.com" ></iframe>

</body>	
</html>
Try </>

src attribute specifies the address of browsing content. height and width attributes represent the vertical and horizontal dimensions of the Iframe.

allowfullscreen attribute allows full-screen size for the video.

You can add media using the iframe element but we recommend you to use video and audio elements.

Image

Iframe can add an image in the page. But other attributes of an image can not be controlled.

Example

iframe can embed image
<iframe src="files/logo.png"></iframe>

Try </>

Youtube video

we can add youtube video by writing the source code of video in the page.

Example

<iframe src="https://www.youtube.com/embed/YebbWnE-VNM?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Try </>

Firstly video is uploaded on youtube to add in a page. Then we get the source code from the embed option given below the video.

formborder defines the border for the iframe.

Iframe related attributes

name attribute

name attribute can make a link to be opened in named iframe. To understand it see the example below.

Example

<a href="https://www.google.com" target="link">Google</a>
<iframe name="link">
</iframe>
 
Try </>

In the above example, the link opens in the iframe. target attribute contains the name of the iframe.

Was this article helpful?