The thumbnail is the image that is displayed as a preview of the video. It is used to represent what the video contains or what it is related to. It is displayed until the time the video is started. By default, the first frame of the video is displayed as the initial preview for the video.
Here we have code embeds a video player with specified dimensions, showcasing a GeeksforGeeks video in MP4 format.
<!DOCTYPE html><html>
<body>
<video width="400"
height="350">
<source
src=
Placement100-_-GeeksforGeeks2.mp4"
type="video/mp4"
/>
</video>
</body>
</html>
|
Example of setting the thumbnail image on video in HTML
Using the poster attribute
To add a custom thumbnail to your video element on a webpage, you can use the “poster” attribute in the video tag. This allows you to display a specific image of your choice as the thumbnail of the video. To do this, simply create a “poster” attribute in the video tag and add the URL of the thumbnail image to it.
Syntax
<video controls poster="images/thumbnail.webp">
<source src="path/to/songs.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Approach:
- Use the HTML ‘<video>’ tag to embed a video in your webpage.
- Add the ‘controls’ attribute to enable standard video playback controls.
- Set a custom thumbnail using the ‘poster’ attribute with the URL of an image.
- Include a ‘<source>’ element within ‘<video>’ to specify the video source URL and type.
- Adjust the ‘width’ and ‘height’ attributes for the video player’s dimensions and ensure responsiveness.
Example: In this article we will see how to set the thumbnail image on video in HTML5.
<!DOCTYPE html><html>
<body>
<video width="400" height="350" controls poster=
<source
src=
Placement100-_-GeeksforGeeks2.mp4"
type="video/mp4">
</video>
</body>
</html>
|
Output: