Setting Width and Height for the video Tag
Just like the img tag, the video tag can also have its width and height specified.
<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
.
<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