Skip to main content
Crowdfunding
Python + AI for Geeks
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.