Learning Web Design, 6th Edition

Chapter 10. Embedded Media

10

Embedded Media

In This Chapter

The iframe element

The object element

Video and audio players

The canvas element

The HTML specification defines embedded content as “content that imports another resource into the document, or content from another vocabulary that is inserted into the document.”

In Chapter 7, Adding Images, we looked at the img and picture elements, which “import another resource into the document,” and the svg element,which inserts an image using “another vocabulary.” But images certainly aren’t the only things you can stick in a web page. In this chapter, we’ll look at other types of embedded content and their respective markup, including the following:

• A window for viewing an external HTML source (iframe)
• A multipurpose embedding element (object)
• Video and audio players (video and audio)
• A scriptable drawing area that can be used for animations or game-like interactivity (canvas)

Window-in-a-Window (iframe)

<iframe>...</iframe>

A nested browsing window

The iframe (short for inline frame) element lets you embed a separate HTML document or other web resource in a document. It has been around for many years, and it has become one of the most popular ways to share content between sites.

For example, when you request the code to embed a video from YouTube or a map from Google Maps, the sites provide iframe-based code to copy and paste into your page. Many other media sites have followed suit, because it allows them to control ...