Basic HTML

Home / Topic / Basic HTML / iFrames and HTML Embeddings

iFrames and HTML Embeddings

Inserting External Content (`<iframe>`)

The <iframe> tag allows embedding external content into a web page, such as videos, maps, and documents. The src attribute defines the URL of the content to be embedded.

html

"In this example, the iframe displays an external web page in a window within the page. The width and height are defined with the width and height attributes."

Embedding YouTube Videos, Google Maps, and Other Embeddings

Many platforms, like YouTube and Google Maps, allow generating an <iframe> code to embed their content directly into a web page. To add a YouTube video, for example, you need the video's URL in the src attribute.

html

"This iframe includes a YouTube video, with the video URL in the src attribute. Fullscreen mode is allowed and the frame has a border of zero."

To embed a Google map, simply use the Google Maps link provided on the platform.

html

"This iframe contains a Google map, embedded with a specific URL generated in Google Maps. It's possible to customize size and other attributes."

Security Considerations for iFrames

When inserting external content, it's important to consider the security risks associated with iFrames. Some security tips include:

Using the sandbox attribute to restrict iframe behavior.
Using referrerpolicy="no-referrer" to enhance user privacy.
Only allowing iFrames from trusted sites.

html

"This iframe uses the sandbox attribute to restrict certain functionalities, like scripts. This helps mitigate risks when embedding external content."

Chapter Closure

You can now use iFrames to effectively and securely embed external content into your web page. In the next chapter, we will learn how to represent data and visually structure information in HTML.

Back to previous chapter

Mark as read and continue

Ask me anything