How to use the iframe element to embed videos on your webpage

The name iframe stands for inline frame.

It’s an inline element that directly embeds other HTML content within an HTML page. The HTML content may include videos, maps, other HTML elements, or even external web pages.

This is the iframe element’s syntax:

(click on the image to open in a new tab)

The src attribute specifies the URL of the page you want to embed.

The width attribute sets the iframe’s width.
You can also set the iframes height with the use of the height attribute.

Using allowfullscreen lets the user view the iframe in fullscreen.

Defining a title attribute for the iframe is considered good practice since it improves accessibility.

The allow attribute controls permissions like autoplay or picture-in-picture.

The frameborder deals with borders. When set to 0 borders are removed.

You can embed videos in iframe elements by copying from services like YouTube and Vimeo, or setting the src attribute to the video’s URL.

Note: Any video source is acceptable. Sources other than YouTube and Vimeo are also acceptable.

Embeding Maps with iframe

You can also embed maps, other web pages, or direct HTML inside iframes.

Here’s how to Embed a Google Map

Go to Google Maps
Search for a location
Click the “Share” button
Select the “Embed a map” tab
Copy the <iframe> code provided

Here’s a map I was able to embed with the iframe element:

We can embed maps into iframe elements.

(click on the image to open in a new tab)

Although my blog doesn’t support comments, feel free to reply via email or X.