Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Set the video’s poster attribute to the URL of an image:
<video controls width="640" height="360" src="video.mp4" poster="preview.jpg">
Your browser does not support HTML video.
</video>The browser displays preview.jpg while no video data is available and before playback starts. Use a valid, non-empty image URL and choose a representative frame so visitors can understand what the video contains before pressing Play.
| # | 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.56 | Buy on Amazon |
The standard HTML5 solution: the poster attribute
poster is the built-in HTML5 mechanism for a video preview image. It accepts an image URL, including a relative path such as images/preview.jpg or an absolute URL. The browser uses that image when video data is not yet available and before playback begins.
A minimal, complete example is:
<video
controls
width="640"
height="360"
src="video.mp4"
poster="preview.jpg">
Your browser does not support HTML video.
</video>Place the image and video at paths your web server can serve. If the URL is invalid, the poster frame will not appear.
#1 Best Overall
What happens when there is no poster?
Without a poster attribute, the player can show nothing until video data is available. Once the first frame is available, that frame may be used as the poster frame. This can produce a black, blank, or otherwise unhelpful preview during loading, especially when the opening frame contains little visual information.
Adding an explicit image gives you predictable content before playback. The HTML Standard describes the poster as a representative frame, typically one of the first non-blank frames, that gives users an idea of the video.
Choose an effective preview image
Use a representative frame
Select an image that accurately reflects the video rather than a generic placeholder. A clear opening scene, product view, lesson title, or other recognizable moment helps visitors decide whether to watch.
Keep the player shape consistent
Set width and height attributes, or reserve the same shape with CSS aspect-ratio. Reserving space prevents the page from jumping when the video and poster load. Make the image’s proportions match the player so it does not look unexpectedly cropped or stretched.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
Use a web-ready image URL
The URL must be non-empty and reachable from the page. Check capitalization, relative-path location, server permissions, and whether the image is actually returned as an image rather than an error document. A broken image URL results in no poster frame.
Design versus captured frames
A designed thumbnail provides consistent branding and readable text. A captured frame shows the actual content. Either approach satisfies the poster requirement; the important point is that the image is representative and available at the time the browser requests it.
A production-ready video element
Include fallback text inside the video element for user agents that cannot play the media. You can also provide a direct download link:
<video
id="course-intro"
controls
width="1280"
height="720"
src="media/course-intro.mp4"
poster="images/course-intro-preview.jpg"
preload="metadata">
<p>Your browser cannot play this video.</p>
<p><a href="media/course-intro.mp4">Download the video</a> instead.</p>
</video>The fallback content is only used when the browser cannot render the video element. It does not replace the poster for browsers that support HTML video.
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 errorsControl when media and poster resources load
The preload value is a request to the browser, not a guarantee. Browsers can choose a different loading strategy.
| Value | Request | When it is useful |
|---|---|---|
none |
Request no preloading | Minimizes initial media transfer when visitors may not play the video. |
metadata |
Request metadata such as duration and dimensions | Balances useful player information with lower transfer than a full prefetch. |
auto |
Allow the browser to download the whole file | Can make playback start quickly when immediate viewing is likely, at the cost of more bandwidth. |
These settings primarily describe video loading. They do not change the requirement that the poster URL be valid. If you also use loading="lazy", the poster resource is requested when the video is near or within the viewport rather than immediately on page load. This can reduce work for videos far below the fold, but the preview will not be available until the element approaches the viewport.
Example for a video below the fold
<video
controls
width="640"
height="360"
src="interview.mp4"
poster="interview-preview.webp"
preload="none"
loading="lazy">
Your browser does not support HTML video.
</video>Change the preview image with JavaScript
The DOM property HTMLVideoElement.poster reflects the HTML attribute. Assigning a valid image URL changes the poster resource:
<video id="intro" controls src="intro.mp4" poster="intro-before.jpg">
Your browser does not support HTML video.
</video>
<button type="button" id="show-alternate">Show alternate preview</button>
<script>
const video = document.getElementById('intro');
const button = document.getElementById('show-alternate');
button.addEventListener('click', () => {
video.poster = 'intro-after.jpg';
});
</script>Assign the URL before playback if you want the new image to be visible as the idle preview. If the image path is wrong, changing the property cannot display it. For a predictable result, make sure the replacement image is available from the same page context and verify the final URL in the browser’s network tools.
Rank #4
- Used Book in Good Condition
Why the preview is black or missing
The poster URL is wrong
- Open the image URL directly in a new browser tab.
- Check relative paths from the page URL, not from the video file’s directory unless they are the same.
- Check filename capitalization on case-sensitive servers.
- Confirm the server returns the image instead of a 404 page, login page, or other response.
The image has not loaded yet
A poster may be requested later when the video uses loading="lazy" or when browser loading decisions defer work. Scroll the element into view and test again. If immediate visibility matters, remove lazy loading and choose an appropriate preload request.
The player has no reserved dimensions
Without dimensions, surrounding content can move while the media element establishes its size. Add matching width and height attributes or set a CSS aspect ratio.
The first frame is blank
This occurs when no explicit poster is supplied and the browser falls back to the first available frame. Create a separate representative image and set it with poster instead of relying on the opening frame.
JavaScript changed the wrong element
Confirm that the selector returns the intended video element and that the assignment runs after the element exists. Log video.poster after assignment to verify the reflected URL.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Best Value
Fallback text is visible
Fallback markup appears when the user agent cannot play the video element. Keep the text and download link useful; do not hide them with CSS as a substitute for providing playable media.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Responsive and accessible markup
For a fluid layout, keep intrinsic dimensions on the element and constrain it with CSS:
.video-frame {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.video-frame video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}Use an aspect ratio that matches your actual media. The poster should communicate the same content at small sizes, so avoid tiny text and place important subjects away from edges that could be cropped. Keep fallback text or a download link inside video; it is the usable alternative for browsers that cannot play the file.
Testing checklist
- Load the page with the video stopped and confirm the intended image is visible.
- Open the poster URL directly and verify that it returns the expected image.
- Test a hard reload and a slow connection to observe the pre-playback state.
- Scroll to a lazy-loaded video and confirm the poster appears as it approaches the viewport.
- Start playback, pause, reload, and confirm the poster returns before the next play.
- Disable JavaScript and confirm the static poster and fallback markup still make sense.
- Resize the viewport and check that the reserved shape does not cause layout shifts or unwanted cropping.
Or skip the browser setup
If you need an image of the rendered page that contains your video preview, ScreenshotNeo can capture the URL with one request. It is a website screenshot API and MCP server; it does not replace the HTML poster attribute or extract a video frame. You still set the poster in your page, then capture the finished page when you need a static image.
Recommended Free Tools
Quick Recap
cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo documentation for request options. Before capture, it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to try it.
Quick reference
- Use
poster="image-url"on thevideoelement. - Choose a representative, non-blank image and verify its URL.
- Set dimensions or an aspect ratio to reserve the player shape.
- Use
preload="none",metadata, orautoaccording to your transfer and playback needs; the browser may treat these as hints. - Use
loading="lazy"when delaying off-screen poster loading is acceptable. - Keep fallback text or a download link inside
video. - Assign
video.posterwhen the preview must change at runtime.
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.
