What is Iframe

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

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

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.

Click on following links 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>

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. Save the code and run.

<iframe src="https://www.youtube.com/embed/KAl4RYpkV6Q" 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.