Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Difficulty Level : Medium
  • Last Updated : 27 Apr, 2020

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

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

Example:






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

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :