How to make HTML5 Video Poster be same Size as Video Itself ?

Last Updated : 04 Apr, 2024

To make an HTML5 video poster the same size as the video itself to achieve this you can use the HTML5 <video> elements, you can specify a poster frame that will be displayed before the video starts playing. To ensure that the poster image is the same size as the video itself, you should use an image with the same dimensions as the video.

Below are the approaches to make HTML video poster as same size as video:

Table of Content

Using CSS object-fit
Using the poster attribute

Using CSS object-fit

The object-fit CSS property gives which of these options you want to use when displaying an image or video inside a container It’s useful when working with responsive designs, where you want to change the video or image to different screen sizes and aspect ratios.

With the help of object-fit property, you can control the behavior of images/ videos within their containers, ensuring a consistent and visually appealing display across different devices and screen sizes.

Syntax:

 object-fit: fill | contain | cover | none | scale-down;

fill: The replaced content is sized to completely fill the element’s content box. If the object’s aspect ratio does not match the aspect ratio of the box, then the object will be stretched or squished.
contain: The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box.
cover: The replaced content is scaled to completely cover the element’s content box. If the object’s aspect ratio does not match the aspect ratio of the box, then the object will be cropped.
none: The replaced content is not scaled at all and will be rendered at its intrinsic size.
scale-down: The replaced content is scaled down to the smallest size that fits within the element’s content box while preserving its aspect ratio.

Example: To demonstrate making a HTML5 video poster of same size as the video itself using the CSS object-fit property.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Object Fit</title>
</head>
<style>
      /* CSS for object-fit approach */
      #video-container1 {
        width: 50%;
        position: relative;
        margin-bottom: 20px;
    }
    #video-container1 video
     {
        width: 100%;
        height: auto;
    }
    #video-container1 video {
        object-fit: cover;
    }
   
  </style>
<body>
    <div id="video-container1">
        <video controls poster="py.png">
            <source src="tech.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        
    </div>
    
</body>
</html>

Output:

output1

Using the poster attribute

In HTML, the poster attribute is always used with the <video> element to specify the path or URL of the image file you want to use as the poster for your video. It’s like adding the extra book cover or a movie poster in the video player before the actual video starts playing.

Syntax:

<video width="320" height="240" controls poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Example: To demonstrate making a HTML5 video poster of same size as the video itself using the poster attribute.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Poster</title>
</head>
<style>
      #video-container2 {
        width: 50%;
        position: relative;
        margin-bottom: 20px;
    }
    #video-container2 video {
        width: 100%;
        height: auto;
    }
    #video-container2 img {
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<body>
    <div id="video-container2">
        <video controls poster="py.png">
            <source src="tech.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        
    </div>
</body>
</html>