In this tutorial, we will learn about HTML IFrame. The iframe is used to show a web page on a web page. That web page may be from the same site or maybe from the same site. Here we will learn how we can create an Iframe element on our web page. Here we will also learn how we can Embed YouTube video and Google Maps on our web page.
Page Contents
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 a Web page:
It is so easy to Embed YouTube video on a web page. Just open the video on YouTube. Then just click the share button which is located under the video. Then click on first option Embed.
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 a Web page:
To Embed Google Maps open google maps in your PC and search for a location which you want yo embed in your web page. Then click on the share button. Then click on Embed a map.
Then copy whole IFrame code and paste in your web page. Now you can see Google Map on your 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>