The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Add a poster attribute to your <video> element and point it to an image. The browser displays that image before playback begins, provided the URL works and no video data is available. For example: <video controls src="video.mp4" poster="preview.jpg">...</video>.
Add a poster image in HTML
The HTML5 video poster is an image shown in the player before playback. Set it with the poster attribute; its value should be a non-empty URL that resolves to an image.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
HTML5 Pocket Reference: Quick, Comprehensive, Indispensable (Pocket Reference (O'Reilly)) | $11.37 | Buy on Amazon |
| 2 |
|
HTML5 and CSS3 All-in-One For Dummies | $28.49 | Buy on Amazon |
| 3 |
|
Html5: QuickStudy Laminated Reference Guide | $5.95 | Buy on Amazon |
| 4 |
|
HTML5 For Dummies Quick Reference | $5.67 | Buy on Amazon |
| 5 |
|
Beginning HTML5 and CSS3 For Dummies | $23.04 | Buy on Amazon |
<video
controls
width="640"
height="360"
src="video.mp4"
poster="preview.jpg">
Your browser does not support HTML video.
</video>Replace video.mp4 and preview.jpg with URLs that work from the page where this markup is used. A relative path such as preview.jpg is resolved relative to the page URL; you can also use an appropriate absolute image URL. The width and height attributes reserve space for the player. The numbers above are an example, not a required video size.
The WHATWG HTML Standard describes the poster as a representative frame that gives the user an idea of the video, typically one of the first non-blank frames. It does not require a particular image format or a specific design. A clear still from the video is a natural choice; a designed thumbnail can provide consistent branding if it still represents the content accurately.
#1 Best Overall
What appears before playback
When a valid poster is set and no video data is available, the browser can show the image in the video element. If you omit the attribute, MDN documents that nothing is displayed until the first frame is available; that first frame can then be shown as the poster frame. This fallback can be unsuitable if the opening frame is black, blank, or otherwise uninformative, which is why an explicit poster is useful when the initial image matters.
The poster is not a replacement for the video source. It is an image displayed in the player before playback; the src still identifies the media to play. The image URL must be valid: an invalid URL produces no poster frame.
Choose a suitable image and reserve the player shape
Use an image that previews the content rather than a blank frame. You can prepare a thumbnail separately or use a representative frame from the video. The standard calls for representativeness but does not prescribe a pixel size, aspect ratio, format, or visual style. Choose an image that fits the shape of the player you intend to display and check it in the actual page layout.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
Set width and height on the video element, or reserve its shape with CSS aspect-ratio. Reserving space helps avoid the page layout shifting when the player is displayed. The cited standards and documentation do not establish a numeric layout-shift target for this markup, so dimensions should reflect your layout rather than an invented universal threshold.
<video class="lesson-video" controls src="lesson.mp4" poster="lesson-preview.jpg">
Your browser does not support HTML video.
</video>
<style>
.lesson-video {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
</style>The ratio in this example is a layout choice, not a browser requirement. If the source or design uses a different shape, use the intended shape instead. The important point is to reserve the player area while the media is not yet playing.
Control media loading without assuming the poster is a preload setting
The preload attribute is a browser hint about video loading; it does not set or replace the poster. Choose among these values based on the loading behavior you want:
| Value | Requested behavior | Trade-off |
|---|---|---|
none |
Do not preload video data. | Minimizes requested initial media transfer, but does not request metadata in advance. |
metadata |
Load metadata only. | A middle option when the page needs media details without requesting the whole file. |
auto |
Allow the whole file to be downloaded. | Can make more video data available early, at the cost of potentially more transfer. |
These are requests, not guarantees: browsers are not required to follow the hint exactly. For example, adding preload="none" does not mean that the browser must fetch nothing in every circumstance. Keep the poster decision separate: provide poster when you want a specific preview image, and choose preload for the desired video-loading hint.
<video controls preload="metadata" src="lesson.mp4" poster="lesson-preview.jpg">
Your browser does not support HTML video.
</video>Defer poster loading for off-screen video
For a video using loading="lazy", MDN notes that the poster resource is downloaded when the video is near or within the viewport. This can defer loading for video players farther down a page. It also means a poster may not have been fetched while its player remains well outside that area. Use lazy loading when that timing suits the page, rather than expecting the poster to be available immediately regardless of where the player sits.
<video controls loading="eager" src="interview.mp4" poster="interview-preview.jpg">
Your browser does not support HTML video.
</video>Change the poster with JavaScript
HTMLVideoElement.poster is a string property reflecting the HTML attribute. Assign a new valid image URL to change the poster resource at runtime:
Rank #4
- Used Book in Good Condition
<video id="intro" controls src="intro.mp4" poster="intro-before.jpg"></video>
<script>
const video = document.getElementById('intro');
video.poster = 'intro-after.jpg';
</script>Use the actual video element when assigning the property, and give it an image URL that resolves in the page. Changing the property changes the poster resource; it does not change the video file or extract a frame from that file.
Keep fallback content inside the video element
Text inside <video> provides fallback content for user agents that cannot play the media. You can keep a concise explanation or include a link to the video file:
Recommended Free Tools
<video controls src="training.mp4" poster="training-preview.jpg">
Your browser cannot play this video.
<a href="training.mp4">Download the video</a>.
</video>This fallback serves a different purpose from the poster: the poster previews the video in a capable player before playback; the nested content gives users of an unsupported user agent an alternative. Follow the video element’s opening tag with meaningful fallback text or a useful link rather than leaving the fallback area empty.
Best Value
Troubleshoot a missing or black preview
- No image appears: Check that the
posterattribute is present and that its URL resolves to an image from the page. MDN documents that an invalid poster URL produces no poster frame. Check relative paths in the context of the page URL. - The preview is blank or black: The image may itself be blank, or the player may be relying on the first video frame because no usable poster is set. Choose a representative non-blank image and set it explicitly.
- The old image remains after a script change: Confirm that your code selected the intended video element and assigned the new URL to its
posterproperty. The property reflects the attribute, so inspect the element and the assigned value. - The poster does not load while the player is far down the page: If the video uses
loading="lazy", the poster download is deferred until the element is near or within the viewport. That timing is part of lazy loading. - The page shifts when the player appears: Reserve the intended player dimensions with the element’s
widthandheightattributes or CSSaspect-ratio. - The video downloads more than expected: Review the
preloadhint.autopermits the entire video file to be downloaded, whilenonerequests no preloading andmetadatarequests metadata only. Browsers may interpret these hints differently.
Or skip the browser setup
If you want an image of a rendered page that contains a video player, ScreenshotNeo can capture the page in one GET request. For instance, after publishing a page with its poster in place, capture that rendered page to an image. This is a webpage screenshot, not a tool for extracting a frame directly from a video file. See the ScreenshotNeo API documentation for its request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/video-page -o shot.webp- ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. Responses identify the page verdict and billing status in
X-Page-VerdictandX-Billedheaders. - An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for AI agents, including Claude, Cursor, and other MCP clients. - The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Every feature is on every plan.
Visit ScreenshotNeo for the service details, or sign up for 1,000 free screenshots a month with no card.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors
