HTML Frames - Creating an Inline Frame (Floating Frame)

Inline Frame or an iframe is allows us to open new pages inside main pages. Inline frames are also referred to as Floating frames.
<iframe> .. </iframe> tag is used to create inline or floating frame.

Here is an sample code of an iframe used to show youtube video.

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/e4ZJwowtIFo?si=3dYRClPanO_veIz9" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
allowfullscreen></iframe>

Attributes of <iFrame> tag :

name: used to set a name for the iframe.
src: Specifies the url of the document to be loaded into the iframe.
Width: used to specify the width of the iframe.
Height: used to specify the height of the iframe.

Frameborder: used to specify the whether to have a border for the iframe or not. This attribute possibly takes two values. i.e, 1 for on and 0 for off.

Scrolling: used to specify whether the iframe should have scrolling capability or not. This attribute possibly takes two values i.e, 1 for on and 0 for off.
vspace: used to leave gaps on the top and bottom of the iframe. This attribute is similar to cellspacing attribute of a table tag.
hspace: used to leave gaps on the sides of the iframe. This attribute is similar to cellpadding attribute of a table tag.
marginwidth:used to specify the number of pixels to be left as the left/right margins.
marginheight: used to specify the number of pixels to be left as the top/bottom margins.
Example:
<iframe name="iname" src="targetpg.html"></iframe>

Embed Google map

To show a location google map gives you code using iframe , here is one sample code to show map of Mumbai.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d241316.67337813933!2d72.71603275896192!3d19.082501695895846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c6306644edc1%3A0x5da4ed8f8d648c69!2sMumbai%2C%20Maharashtra!5e0!3m2!1sen!2sin!4v1694417704855!5m2!1sen!2sin" 
width="400" height="300" style="border:0;" 
allowfullscreen="" loading="lazy" 
referrerpolicy="no-referrer-when-downgrade"></iframe>

Hidden attribute can be added in HTML5

<iframe name='myiframe' src='uploadck.php' width="300" height="300" hidden> 
</iframe>

HTML Advantages of frames FRAMES

<iframe> Inline Frame

Attributes of <iFrame> tag :

Embed Google map

Hidden attribute can be added in HTML5

Subscribe