How to set the thumbnail image on video in HTML 5 ?

Introduction: In this article, we are going to learn how to set a thumbnail image for an HTML5 video. Thumbnail is the image that is displayed as a preview of the video. Basically 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.

Approach: Sometimes the user wants to display a specific image of his choice as the thumbnail of the video. This can be simply done by using the poster attribute. All you have to do is create a poster attribute in the video tag and place the URL of the thumbnail image in it.

Syntax:

<video height="" width="" poster="URL of the image to be displayed">

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:



Explanation: The poster attribute of the video tag contains the URL of the image that the user wants to set as the thumbnail of the video which is the image that will be visible until the user press the play button. The src attribute contains the URL of the video and the control attribute shows features like play/pause/seek/volume in the video.

For more information on HTML video tag please visit here

full-stack-img

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.