Adding Images, Videos and Audio

June 22, 2017

In this lesson, you’ll learn:

How to add images, video, or audio to web pages
How to add more advanced interactive content like YouTube videos and Google Maps

Adding Images

Images are added with the <img> element. This is a self-closing tag, which means you shouldn’t include an end tag.

When adding an image, include the following four properties:

src - the file path to the image
width - the width of the image in pixels
height - the height of the image in pixels
alt - alternative text to display if the image doesn’t load correctly

<img src="https://static.commonlounge.com/fp/600w/7GMMkcHtJB74wpHcwgP64rtr61520499579_kc"
  width="300"
  height="300"
  alt="My cute fluffy dog"/>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <img src="https://static.commonlounge.com/fp/600w/7GMMkcHtJB74wpHcwgP64rtr61520499579_kc"
    width="300"
    height="300"
    alt="My cute fluffy dog"/>
</body>
</html>

Result:

If the image is purely decorative and adds no meaning to the page, you can leave the alt text blank.

You can use images in many formats, but jpeg, png, and gif are the most common. Choose the type that will give you the best image quality with the lowest file size.

Images are block elements by default, but if you want to wrap text around an image, you can float the image to the left or the right.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    img {
      float: left;
    }
  </style>
</head>
<body>
  <p>
    <img src="https://static.commonlounge.com/fp/600w/7GMMkcHtJB74wpHcwgP64rtr61520499579_kc"
      width="300"
      height="300"
      alt="My cute fluffy dog"/>
    Here is a bunch of text. Here is a bunch of text. Here is a bunch of text. 
    Here is a bunch of text. Here is a bunch of text. Here is a bunch of text. 
    Here is a bunch of text. Here is a bunch of text. Here is a bunch of text. 
    Here is a bunch of text. Here is a bunch of text. Here is a bunch of text. 
    Here is a bunch of text. Here is a bunch of text. 
  </p>
</body>
</html>

Adding Video

You can add video with the <video> element.

When adding video, make sure to add the src property with the path to the video file.

<video src=”myvideo.ogv”>

You can also add the following properties if you’d like:

autoplay - add this (with no value) to automatically start playing the video when it loads
controls - add this (with no value) to display the controls on the video (pause, play, etc.)
loop - add this (with no value) to make the video play over and over again in a loop
poster - add the source to an image that will be the cover of your video

<video src="myvideo.ogg" autoplay controls loop poster="my-video-cover.jpg">

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <video src="http://techslides.com/demos/sample-videos/small.ogv" autoplay controls loop poster="https://static.commonlounge.com/fp/600w/7GMMkcHtJB74wpHcwgP64rtr61520499579_kc">
</body>
</html>

Popular video formats are ogv and mp4.

This element is used for directly hosting videos on your site, but it may be better to host videos on YouTube or Vimeo and include them on your page. This will be covered in the section below called Adding Other Media.

Adding Audio

You can add audio with the <audio> element.

When adding audio, make sure to add the src property with the path to the audio file.

<audio src="mysong.ogg">

You can use many of the same attributes as video on an <audio> element:

autoplay - add this (with no value) to automatically start playing the audio file when it loads
controls - add this (with no value) to display the controls on the audio file (pause, play, etc.)
loop - add this (with no value) to make the audio file play over and over again in a loop

<audio src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" autoplay controls loop>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <audio src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" autoplay controls loop>
</body>
</html>

Result:

Popular audio formats include ogg and mp3.

Adding Other Media

Have you ever seen a YouTube video or Google Map embedded into a page?

You can add rich and interactive media onto your web page using something called inline frames.

These create a little frame that loads a new HTML page, allowing you to embed rich content from other websites.

You can find iframe codes for popular services like YouTube and Google Maps on each service’s website. They’re usually under a section called “Share” or “Embed.”

Here’s an example of code for a YouTube video:

<iframe width="560" height="315" src="https://www.youtube.com/embed/m9VO7X_q9nw" 
  frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
</iframe>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/m9VO7X_q9nw" 
    frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
  </iframe>
</body>
</html>

Result:

This will load the Kitten Academy Live Stream onto your page.

You don’t need to worry about the details much — you can just copy and paste.

Now you can spice up your web pages with audio, video, and interactive content! Go to the next lesson to learn how to build forms.