HTML5 - Embedded and Multimedia content

#html #webdev #beginners

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:

<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.

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:

<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:

<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.

Audio

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

<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.

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:

<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:

<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:

<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.

<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:

<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>