Open In App

How to set the thumbnail image on video in HTML ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.

HTML




<!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.

html




<!DOCTYPE html>
<html>
 
<body>
 
    <video width="400" height="350" controls poster=
        <source
            src=
 Placement100-_-GeeksforGeeks2.mp4"
            type="video/mp4">
    </video>
</body>
 
</html>


Output:

Using the poster attribute



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads