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>
Output:
Parvesh Sandila is a results-driven tech professional with 8+ years of experience in web and mobile development, leadership, and emerging technologies.
After completing his Master’s in Computer Applications (MCA), he began his journey as a programming mentor, guiding 100+ students and helping them build strong foundations in coding. In 2019, he founded Owlbuddy.com, a platform dedicated to providing free, high-quality programming tutorials for aspiring developers.
He then transitioned into a full-time programmer, where his hands-on expertise and problem-solving skills led him to grow into a Team Lead and Technical Project Manager, successfully delivering scalable web and mobile solutions. Today, he works with advanced technologies such as AI systems, RAG architectures, and modern digital solutions, while also collaborating through a strategic partnership with Technobae (UK) to build next-generation products.