Skip to main content
Practice

Setting Width and Height for the video Tag

Just like the img tag, the video tag can also have its width and height specified.

Setting width, height
<video
  src="http://media.w3.org/2010/05/sintel/trailer.mp4"
  controls
  width="320"
  height="180"
>
  Test video
</video>

The HTML above displays the same video with a width of 320px and a height of 180px.

So far, you've learned about using the <video> tag to embed videos in a webpage.


Let's use the "video" tag you've learned to add videos to a gallery.

Try replacing the 3rd and 4th image files in your gallery grid with <video> elements.

When you upload a video using the "Upload" menu on the left, you can get the URL for that video.

Put this URL in the src attribute or find a video URL online and place it directly in the src.

Replace the src attribute
<div class="gallery">
  <img
    src="https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg"
    width="100%"
    height="100%"
    alt="Item 1"
  />

  <img
    src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg"
    width="100%"
    height="100%"
    alt="Item 2"
  />

  <!-- Change 3rd image to video -->
  <video
    src="https://joy1.videvo.net/videvo_files/video/free/video0461/large_watermarked/_import_60e0167b4c3a96.14254367_preview.mp4"
    class="gallery-video"
    width="100%"
    height="100%"
    controls
  >
    Item 3
  </video>

  <!-- Change 4th image to video -->
  <video
    src="https://joy1.videvo.net/videvo_files/video/free/video0454/large_watermarked/_import_60648ebe8b20a7.07188709_preview.mp4"
    class="gallery-video"
    width="100%"
    height="100%"
    controls
  >
    Item 4
  </video>
</div>

Now, the 3rd and 4th grid items will display videos instead of images.


By using the "video" tag, you can add videos to create a more dynamic webpage. However, remember that the src attribute must contain a URL to a video file.

So how can we display a video on a webpage without a video file, like using a YouTube video link?

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.