HTML Iframe

Written By:

Updated on

HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 89 reviews
  1. Home
  2. Frontend
  3. Html
  4. Html Tutorial

Iframe Tag


Iframe is a inline element used to embed other webpages or website within a page. Iframe can also be used to embedded Youtube video, embed Google map to a webpage.

		
    <iframe src="https://www.techaltum.com"></iframe>

Iframe Attributes

Iframe includes many attributes to add properties like, src, width, height etc. Here is a list of attributes used in iframe.

Iframe Attributes
Attribute Use
src source of iframe
width width of iframe
height height of iframe
title title for web accessibility
loading="lazy" delay iframe loading if not in viewport
allow allow features for iframe
allowfullscreen iframe can open in fullscreen
name name for iframe used to target on click of hyperlink.
frameborder 0 to remove default border

Target Iframe on Hyperlink

A hyperlink can open a webpage in iframe. To do this, name your iframe, and set target to hyperlink as iframe's name. If iframe name is frame1, hyperlink target should be frame1. See example below


Click here Link 1 Link 2 link 3 Link 4 

    <iframe name="frame1"></iframe>
        
    <a href="img/img1.jpg" target="frame1">Link 1</a>
    <a href="img/img2.jpg" target="frame1">Link 2</a>
    <a href="img/img3.jpg" target="frame1">Link 3</a>
    <a href="img/img4.jpg" target="frame1">Link 4</a>

Iframe is usually not recommended for these type of applications. Use javaScript

Embed Google Map in iframe

Iframes are also used to embed google map on a webpage. This is a free service by Google Maps. To embed goggle maps in iframe, follow these steps

How to embed Google Map

  1. Open Google Maps.
  2. Click Left menu.
  3. Choose share or embed map
  4. In popup window, choose Embed a map.
  5. Choose the size of iframe.
  6. Copy iframe and paste on your webpage.
  7. Remove frameborder="0" from copied iframe.
  8. Save the code and open in browser.

<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3503.575022750921!2d77.31301609999998!3d28.58252155000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sTech+Altum%2C+Naya+Bans+Village%2C+Sector+15%2C+Noida%2C+Uttar+Pradesh%2C+India!5e0!3m2!1sen!2s!4v1391062749471" style="width:100%; border:0" height="300"></iframe>

Embed youtube video in iframe

Like google map, a youtube video can also be embedded into iframe and publish on website. To embed a youtube video, follow these steps.

  1. Open youtube website.
  2. Click share button.
  3. Choose embed.
  4. Copy embed video code.
  5. Remove frameborder="0" from iframe.
  6. Change title
  7. Save the code and run.

Youtube Video Embedded in Iframe


<iframe src="https://www.youtube.com/embed/yfb-1DWpBNQ" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Not all video are allowed to embedded. Only video's with permission will be allowed. Channels like, music, movies, albums, copyrighted content will not play in iframe.