Learn
Site Structure
Add a Video

Awesome! The photo makes the webpage much cooler. What’s cooler than a photo? A video!

The HTML video element can add video to a webpage.

<video width="320" height="240" controls> <source src="video-url.mp4" type="video/mp4"> </video>

The video element uses a number of attributes. Let’s take a look at them:

  1. width and height: Set the size of the screen that displays the video.

  2. controls: Adds play, pause and volume control.

  3. source src: Sets the URL of the video to play.

  4. type: Specifies different video formats.

Instructions

1.

In index.html, delete the image element so we can use that space on the webpage for a video.

Run your code.

2.

Next, below the paragraph element, create a video element. Use the code above as a guide.

The video will need:

  1. width and height attributes
  2. a controls attribute
  3. a source src set to:
https://content.codecademy.com/projects/make-a-website/lesson-1/ollie.mp4

Remember, the attribute values must be in quotes, except for controls.

Run your code to view the video in the web browser.

Click the Play button to play your video. When you’ve watched enough, click Next to continue.

Folder Icon

Take this course for free

Already have an account?