Multimedia HTML Elements

Multimedia includes different content you can insert into your website, such as

• video
• music
• voice notes
• maps
• slides
• animations
• ... and more!

In this lesson, you'll review the image tag, since it's similar to how other multimedia elements work. Then you’ll learn new multimedia HTML Elements.

Finally, you can review some of the elements you already know that create interactivity.

Review: Images

A lot of the new interactive elements work similarly to how images work.

<img src="valley-waterfall.png" />

The src attribute tells the browser where to find the image file, and the browser inserts the image at that spot in your site.

When styling images, you have to think about the width and height carefully so that you don’t break the aspect ratio. If an image is normally 100px by 100px, and you make it 50px by 200px in CSS, that will stretch out the image, and it will look bad.

When styling the new interactive elements, you’ll have to think about the same ideas: where’s the source url, and how do I style the element so that it looks right on the page.

<iframe>

Inline frames allow you to embed content from another site into your site. You can use them to embed tons of different kinds of content. In this curriculum, we use tons of embedded content — YouTube and Loom videos, forms, and interactive coding exercises.

A typical iframe might look something like this, which embeds a video from youtube.

See the Pen Iframe Demo by Rob Cobb (@rrcobb) on CodePen.

The src, width and height attributes are familiar from the <img> element.

• src is the url where the browser should find the content
• width and height control the width and height of the element

The other attributes are new:

• title sets the title of the iframe
• frameborder controls the border of the iframe. It’s often good to set it to 0
• allow and allowfullscreen control the permissions that the iframe has. Since the content is coming from another website, you can decide what it is allowed to do.

Audio and Video

The <audio> tag is a built-in audio player. It lets you add audio content to your page, which the user can click to play.

<audio controls src="t-rex-roar.mp3"></audio>

Similarly, the <video> element is a built-in video player.

<video controls width="250" src="flower.webm"></video>

src and width work the same way they do for img and iframe.

The new attribute is controls. With controls added, the audio or video player will show the controls: play, pause, and volume.

It’s usually good to show the controls, since otherwise the user won’t be able to control the video or audio on the page. Usually, if they can’t control the audio or video, they’ll close the page instead of letting things autoplay.

src and source

<audio> and <video> tags allow specifying sources using <source> tags instead of the src attribute.

<video controls width="250">
    <source src="flower.webm" type="video/webm">
    <source src="flower.mp4" type="video/mp4">
</video>

Specifying multiple sources lets browser choose which kind of content to support. There’s fancy new formats like .webm that only some browsers can use, so if you write your code using <source>, users who have those browsers get the fancy new formats, and other users still get something that works for them.

Practice: Maps and Videos

📺 Practice using the <iframe> element by embedding a map and a video into a page.

Access the exercise here