Ep.012 – iFrame – Learn HTML and HTML5 – Free HTML Course

In the previous post, we have learned about meta tags and how to use them on an HTML page. In this post, we will learn about iFrames and how we can use them on an HTML page.

iFrame:

The iFrame tag <iframe> tag is used to show other websites on your own website in a frame. The other website can only be shown on your website if that website allows embedding features. The source attribute src is used to add the URL of the external website. The width and height attributes are used to define the width and height of the frame.

The following example code shows how to show an external website in a frame:

<!--<iframe src="http://blog.codoplex.com" width="360" height="500"></iframe>

Embed Youtube Video using iFrame:

The iframe tag can also be used to embed YouTube videos in your own website. To embed any YouTube video, visit the YouTube video in the browser, then “Right Click” inside the video and click the “Copy Embed Code” option. Now you can place this copied code into your website page. The following code example shows the copied Embed Code of a YouTube video:

Code:

<iframe width="350" height="280" src="https://www.youtube.com/embed/Wnv28LT9WPQ" title="iFrame Video Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Output:

You can adjust the width and height of the frame by changing the values of the width and height attributes of the iframe.

Got Stuck? Any Questions?

In case of any questions, please feel free to contact in the comments section below. Thanks

Leave a Comment

Your email address will not be published. Required fields are marked *