How to set the height and width of the video player in HTML5 ?

How to set the thumbnail image on video in HTML ?

Last Updated : 25 Apr, 2025

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=
"https://media.geeksforgeeks.org/wp-content/uploads/20200409094356/
 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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
        <source
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200409094356/
 Placement100-_-GeeksforGeeks2.mp4"
            type="video/mp4">
    </video>
</body>

</html>

Output:

Using the poster attribute

How to set the height and width of the video player in HTML5 ?

P

preetikagupta8171

Improve

Article Tags :

Similar Reads

How to Insert an Image in HTML?

To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method

How to Move Image in HTML?

The <marquee> tag in HTML allows you to create scrolling effects for images, making it a simple way to add dynamic movement to your webpage. Images can scroll horizontally or vertically, with various attributes controlling the direction and behavior of the movement.Syntax<marquee> <im

How to Embed Video in Iframe in HTML?

You can use Iframe to show videos on your web page and embedding videos are very simple. To do so you can use the iframe tag directly in your HTML. Let's see how we can embed the video in the iframe.Embedding Videos in HTMLTo embed a video, use the iframe tag with the video's URL. Set the width, hei

How to place image or video inside Silhouette ?

In this article, we will learn how to place an image or video inside a silhouette using CSS. Before that, let's have a brief definition of a silhouette. It is basically an image of any person, animal or it could be any object which is represented by a solid palette of color. In general, it is in bla

How to set the height and width of the video player in HTML5 ?

In this article, we will learn to set the width and height of the video player in HTML5. The following are the two scenarios The width and height of the video are fixed.Make the video respond to your screen width. Approach: The HTML5 width and height attributes of the video tag are used to set the h

How to preload the video when the page loads in HTML5?

The HTML <preload> attribute is used to specify the way the developer thinks the video should be loaded when the page loads.Syntax<video preload=""> </video>There are 3 values for preload attribute auto, metadata and none. Note: An empty string leads to the default auto attribute v

How to Play Video in Reverse in HTML5 ?

To play a video in reverse in HTML5, you can use JavaScript to control the playback direction. This involves manipulating the video's current time property to decrement it, creating the effect of reverse playback. This technique allows for custom control over video playback behavior directly within

How to Work with Images in HTML?

Adding images to your web pages is crucial for enhancing visual appeal and user engagement. In HTML, there are different methods to embed images, and this guide will cover two common approaches with syntax and examples.These are the following ways to Work with Images in HTML:Table of ContentAdding S

How to define the URL of the video file in HTML5?

In this article, we will learn how to define the URL of a video in HTML. The <video> tag is used to embed video files on a web page. This displays a video player along with the player controls depending on the browser. The source of the video can either be a singular one or it can be made to s

How To Create a Thumbnail Image using HTML and CSS ?

The thumbnail image is used to add a 1px rounded border around the image. A thumbnail is a small size image that represents a larger image. 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 displaye