Lecture

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.


Adding Videos to a Gallery

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?

Lecture

AI Tutor

Design

Upload

Notes

Favorites

Help