How to Embed Media Files into Webpages

So far, we've only been dealing with textual elements. In practice, you can make your webpage more colorful by embedding media files such as images, videos, and more.

Images in HTML

Let's start with the <img> element, which is used to embed images into your webpage. Assuming you have a file structure like this:

text

.
├── images
│   └── image.png
└── index.html

To embed the image file, go to your index.html, and add an <img> tag.

html

<img src="/images/image.png" alt="This is an image" />

The src attribute specifies the path to the image file. You can use either relative or absolute addresses here, but absolute addresses are highly recommended to avoid confusion.

You can also link to a remote image file hosted on a different server.

html

<img
  src="https://images.unsplash.com/photo-1706014887612-ae5ca8cbb86e?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDgwNTYyNTF8&ixlib=rb-4.0.3&q=85"
  alt="This is an image" />

The alt attribute specifies the alternative text that will be displayed when the image fails to load.

html

<img src="/images/image.png" alt="This is an image" />

The text should describe the content of the image and should never be neglected. Just in case the browser doesn't support the image type, the image file does not exist anymore, or the user is visually impaired and needs to use a screen reader.

The lack of alternative text will have a negative impact on your SEO score.

Specify image size

When running your website in a local environment, the embedded images will be loaded almost instantly.

However, in a production environment, the image file will take some time to be transmitted, which means the textual content will be loaded before the image.

This will cause a significant layout shift since the images usually take up a large space, pushing the textual content down, which will lead to a bad user experience.

Instead, you should specify the image size so that the browser saves enough space.

When the image is loaded, it will fill the reserved space and not impact the overall layout of the webpage.

html

<img src=". . ." alt="This is an image" width="500" height="500" />

Videos and audios

The video and audio files can be embedded in a similar manner. For videos, you must use the <video> element and also specify the src attribute.

html

<video
  src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
  BigBuckBunny
</video>

You may add the controls attribute to display the control buttons.

html

<video
  src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  controls>
  BigBuckBunny
</video>

Just like images, it is best to specify a proper size so that the browser knows how much space should be reserved.

html

<video
  src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  controls
  width="500">
  BigBuckBunny
</video>

Audio embedding works similarly:

html

<audio src=". . ." controls>Audio file</audio>

Embedding webpages

Embedding webpages inside another webpage. This sounds strange, but it is actually very commonly used.

As an example, assuming you have two webpages:

text

.
├── embed.html
└── index.html

And you need to place embed.html inside index.html, this is what you can do:

embed.html

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
 
  <body>
    <p>This is an embed.</p>
  </body>
</html>

index.html

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
 
  <body>
    <iframe src="/embed.html" frameborder="1"></iframe>
  </body>
</html>

iframe

Like any other embeds, it is best to specify a width amd height for your <iframe>.

html

<iframe src="/embed.html" frameborder="1" width="500"></iframe>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <img
    src="https://images.unsplash.com/photo-1706014887612-ae5ca8cbb86e?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDgwNTYyNTF8&ixlib=rb-4.0.3&q=85"
    alt="This is an image" width="500" height="500" />
</body>

</html>

Open Sandbox

Loading course content...

So far, we've only been dealing with textual elements. In practice, you can make your webpage more colorful by embedding media files such as images, videos, and more.

Images in HTML

Let's start with the <img> element, which is used to embed images into your webpage. Assuming you have a file structure like this:

text

.
├── images
│   └── image.png
└── index.html

To embed the image file, go to your index.html, and add an <img> tag.

html

<img src="/images/image.png" alt="This is an image" />

The src attribute specifies the path to the image file. You can use either relative or absolute addresses here, but absolute addresses are highly recommended to avoid confusion.

You can also link to a remote image file hosted on a different server.

html

<img
  src="https://images.unsplash.com/photo-1706014887612-ae5ca8cbb86e?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDgwNTYyNTF8&ixlib=rb-4.0.3&q=85"
  alt="This is an image" />

The alt attribute specifies the alternative text that will be displayed when the image fails to load.

html

<img src="/images/image.png" alt="This is an image" />

The lack of alternative text will have a negative impact on your SEO score.

Specify image size

When running your website in a local environment, the embedded images will be loaded almost instantly.

However, in a production environment, the image file will take some time to be transmitted, which means the textual content will be loaded before the image.

This will cause a significant layout shift since the images usually take up a large space, pushing the textual content down, which will lead to a bad user experience.

Instead, you should specify the image size so that the browser saves enough space.

When the image is loaded, it will fill the reserved space and not impact the overall layout of the webpage.

html

<img src=". . ." alt="This is an image" width="500" height="500" />

Videos and audios

The video and audio files can be embedded in a similar manner. For videos, you must use the <video> element and also specify the src attribute.

html

<video
  src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
  BigBuckBunny
</video>

You may add the controls attribute to display the control buttons.

html

<video
  src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  controls>
  BigBuckBunny
</video>

Just like images, it is best to specify a proper size so that the browser knows how much space should be reserved.

html

<video
  src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  controls
  width="500">
  BigBuckBunny
</video>

Audio embedding works similarly:

html

<audio src=". . ." controls>Audio file</audio>

Embedding webpages

Embedding webpages inside another webpage. This sounds strange, but it is actually very commonly used.

As an example, assuming you have two webpages:

text

.
├── embed.html
└── index.html

And you need to place embed.html inside index.html, this is what you can do:

embed.html

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
 
  <body>
    <p>This is an embed.</p>
  </body>
</html>

index.html

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
 
  <body>
    <iframe src="/embed.html" frameborder="1"></iframe>
  </body>
</html>

iframe

Like any other embeds, it is best to specify a width amd height for your <iframe>.

html

<iframe src="/embed.html" frameborder="1" width="500"></iframe>