HTML5 - Embedded and Multimedia content
Tags: html, webdev, beginners
Published: 2023-09-16 18:41:25

In this article, we will learn about **Embedded** and **Multimedia** content in HTML, such as **image**, **video**, **audio**, and **iframe**.

## Figures

There is a form to insert figures in a page with the `img` element. It's a self-closing element, i.e., `<img>` element closes in the opening tag.

Among the possible attributes for this element, the most important ones are:
- `src`: meaning source, and it is a mandatory attribute, because the text (string) with the URL/link for the image is indicated here.
- `alt`: meaning alternative text, and it's mandatory for accessibility. You must indicate an alternative text (description) for the image in the `alt` attribute.
- `width`: the width of the image can be configured by this attribute, but it's recommended that image size, whenever possible, be configured in CSS.
- `height`: the height of the image can be configured by this attribute, but it's recommended that image size, whenever possible, be configured in CSS.
- `srcset`: meaning set of sources. This is an incredible attribute because it allows using several images for an element, creating a Responsive image.

> Adaptive usually uses two or more different files for the same image, each file with a different size and each file for a different device screen size. Responsive usually uses the same file but changes its size.

**Example:**

The original image size is 200 x 100 pixels (`width` is 200 and `height` is 100). The proportion is 2 to 1. If you indicate `width="400"`, then your image will be 400 x 200. But if you indicate `width="400"` and `height="300"`, the proportion will be changing, and the image will appear distorted. Do you understand?

Below, you can see a code snippet:

```html
<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Christ the Redeemer" />

<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Christ the Redeemer" width="100" />

<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Christ the Redeemer" height="50" />
```

This code will be rendered like below image.

![Img elements rendered.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41eulnznbyylg3ov8yf1.png)

## Picture

An adaptive image alternative to `srcset` from `img` element is the `picture` element. In this element, you indicate different sources and an `img` element is used for fallback.

Look at this example:

```html
<picture>
  <source media="(max-width: 799px)" srcset="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" />
  <source media="(min-width: 800px)" srcset="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=1200" />
  <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=720" alt="Christ the Redeemer" />
</picture>
```

- `<picture>`: This is a container element used for providing multiple sources for an `<img>` element.
- `<source>`: These elements are used inside the `<picture>` element to specify different sources (images) based on media query conditions.

**Video**

To include a video on your page, you can use the `video` element. Here's an example:

```html
<video src="link-video.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>
```

You can include:
- Tracks, such as videos with different language audios.
- Width and Height like the `img` element.
- Loop, if the video plays in a loop.

More information can be accessed in [video: The Video Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Video).

**Audio**

To include audio on a page, you can use the `audio` element. Here's an example:

```html
<audio src="https://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>
```

You can include:
- Tracks, such as videos with different languages.
- Loop, if the audio plays in a loop.

More information can be accessed in [audio](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Audio).

## Figure

The `figure` element is useful when you need to insert independent content like images, code, or videos within your content, optionally with a caption.

In this scenario, the `figure` is a good element to use. Here's an example:

```html
<figure>
  <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Christ the Redeemer" />
  <figcaption>Christ the Redeemer in Brazil.</figcaption>
</figure>
```

You can use the `figure` element for various types of content, not just images. It can be used for videos, code, and more.

## Iframe

Finally, you can include embedded content, such as YouTube videos, PDF file or even another web page, using the `iframe` element. This element creates a space with an individual context, working as separate content inside your page.

Below is an example with two `iframe` elements:

```html
<iframe src="https://www.google.com/webhp?igu=1" width="500" height="400">
  <p>Your browser does not support iframes.</p>
</iframe>
<iframe src="page.html" width="400" height="400">
  <p>Your browser does not support iframes.</p>
</iframe>
```

The `iframe` allows you to specify a URL of a resource in the `src` attribute, indicate `width` and `height` attributes, and provides a fallback message if the browser doesn't support iframes.

### Youtube Videos

Another common use for `iframes` is to embed YouTube videos. Here's an example:

```html
<iframe width="560" height="315" src="https://www.youtube.com/embed/sYmjU2mYc1o?si=DIANF95yhkCnOjBN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
```

This `iframe` embeds a YouTube video player with specific dimensions, source URL, and various permissions to enable features like autoplay and fullscreen mode.

### PDF Viewer

An interesting thing that we can do with an **iframe** is show a PDF (such as a **PDF Viewer**) in your page. In other words, we can embed a PDF into a page. The **below code** shows this functionality.

```html
<iframe src="https://www.tutorialspoint.com/html/html_tutorial.pdf" width="400" height="600" frameborder="0" allowfullscreen></iframe>
```

But, the above example doesn't work because it's common the server indicates that embed content only works if it's in the same origin, such as the same site. Then, if your PDF is on your website, it's OK, it will work.

To get around this problem, we can use the Google Docs viewer, like this below example:
```html
<iframe src="https://docs.google.com/viewerng/viewer?url=https://www.tutorialspoint.com/html/html_tutorial.pdf&embedded=true" frameborder="0" height="500" width="400"></iframe>
```

This code will be rendered like the below image.

![IFrame with PDF embed rendered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy6vubbo9acq1krvac4n.png)

## What Lies Ahead

In upcoming articles, you will delve into ordered, marker, and definition lists, as well as details in HTML. Stay tuned!

## References

- MDN WEB DOCS. [Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). Accessed on September 16, 2023.
- WHATWG. [HTML Living Standard](https://html.spec.whatwg.org/multipage/#toc-dom). Accessed on September 16, 2023.