Skip to main content
Practice

Setting Width and Height of the video Tag

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

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

The HTML example above sets the width of the video to 320px and the height to 180px, displaying the same video with those dimensions.

So far, we have learned about the <video> tag used to insert videos on a webpage.


Now let's use the "video" tag we've learned about to add a video to the gallery.

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

You can upload a video from the "Upload" menu on the left to get the URL of the video.

Place this URL in the src attribute, or find a video URL on the internet and set it to the src attribute.

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

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

  <!-- Replace the 3rd image with a 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
  >
    item3
  </video>

  <!-- Replace the 4th image with a 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
  >
    item4
  </video>
</div>

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


Using the "video" tag, you can add videos to create a more dynamic webpage, but the src attribute must always contain a URL to a video file.

So, how do you display videos on a webpage without an actual video file, like a YouTube video link?

Want to learn more?

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