HTML IFrame

In This tutorial we will learn about HTML IFrame. Iframe is use to show web page in a web page. That web page may be from same site or may be from same site. Here we will learn how we can create a Iframe element in in our web page. Here we will also learn how we can Embed YouTube video and Google Maps in our web page.

So to add Iframe element we have to add Iframe tag in our code. Check the example below.

Example:

<iframe src="https://www.google.com/" height="400px" width="400px"></iframe>

Output:

Note ! You can also use Inline CSS to set border, border radius, height and width of Ifarme .

Embedded YouTube Video in Web page: 

It is so easy to Embed YouTube video in web page. Just open video on YouTube. Then just click share button which is located under the video. Then click on first option Embed

Embedded YouTube Video in Web page

Then copy whole IFrame code and add it in your web page thats it now you can see YouTube video is embedded in your web page.

Example:

<iframe width="100%" height="315" src="https://www.youtube.com/embed/RyhCVKjccko" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Output:

Embedded Google Maps in Web page:

To Embed Google Maps open google maps in your PC and serach for location which you want yo embed in you web page. Then click on share button. Then click on Embed a map.

Embedded Google Maps in Web page

Then copy whole IFrame code and past in your web page. Now you can see Google Map in your web page.

Embedded Google Maps in Web page

Example:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109066.42047370203!2d75.5033781601329!3d31.322378738267222!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a5a5747a9eb91%3A0xc74b34c05aa5b4b8!2sJalandhar%2C%20Punjab!5e0!3m2!1sen!2sin!4v1572023568838!5m2!1sen!2sin" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

Output:

Spread the love