Iframe in html with examples

An iframe (short for “inline frame”) is an HTML element that allows you to embed another HTML document within the current document. This can be useful for displaying external content, such as a video from YouTube, a map from Google Maps, or a form from another website.

The basic syntax for an iframe is as follows:

<iframe src="URL"></iframe>

Where “URL” is the address of the HTML document you want to embed.

Here is an example of how you might use an iframe to embed a YouTube video on a web page:

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

You can also set the width and height of the iframe using the “width” and “height” attributes, respectively. The “frameborder” attribute can be used to add or remove a border around the iframe. And the “allow” attribute is used to specify what permissions to grant the iframe.

Another example is using iframe to embed Google Maps

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14031.982914686901!2d-96.82812!3d32.928286!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x38f2b09817f5c5d5!2sAT%26T%20Stadium!5e0!3m2!1sen!2sus!4v1605697824097!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

It’s worth noting that iframes can be a security risk as they can be used to run malicious code on a website, so they should only be used from trusted sources.

Additionally, it is important to use iframes with responsive design in mind, as embedded content may not be optimized for all screen sizes.

Leave a Comment