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 thealt
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>
This code will be rendered like the below image.
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. Accessed on September 16, 2023.
- WHATWG. HTML Living Standard. Accessed on September 16, 2023.
Top comments (3)
Great post! I'd add another scenario for embedding PDFs without downloading it.
You're right. I forgot this use case.
Glad to help. (y)