poster

The poster attribute in HTML specifies an image to be displayed before a video begins playing, acting as a preview or placeholder for the video.

poster attribute

The poster attribute in the <video> element defines an image shown before the video starts. It serves as a placeholder while the video is loading or until the user presses play, providing a preview to improve user interaction.

Syntax

index.html

<video poster="URL" />

Example

Here’s a basic example of how to apply the poster attribute in a <video> element:

index.html

<video controls poster="thumbnail.png">
  <source src="video.mp4"  type="video/mp4">
  Your browser does not support the video tag.
</video>

Values

URL
- URL of the poster image.

If the poster attribute is omitted, the video will display its first frame by default.

Applies To

The poster attribute can be applied to the following HTML elements:

<video>

Conclusion

The poster attribute in HTML lets you specify a placeholder image for a <video> element, improving the user experience before the video starts playing. It offers a preview of the content, which can help capture the viewer's interest. This attribute is easy to use, requiring just the image URL as its value.

muted

The muted attribute in HTML is a Boolean attribute used with media elements such as <video> or <audio>. When applied, it ensures that the audio is turned off by default.

preload

The preload attribute in HTML specifies whether and how the browser should preload media content for `<audio>` and `<video>` elements before playback begins.