Brett LindenbergA video overlay is any text, image, or clickable element shown on top of the main video, such as a title, a price tag, or a button. In video editing, an overlay is a clip or graphic placed on a track above the main footage, so it covers part of the frame for as long as it stays on the timeline. To add a price overlay, put the price on a text layer above the product shot, keep it clear of the product and the frame edges, and hold it while the product is on screen. If the price will change, add it as an interactive overlay in the player instead, so you can edit it later without exporting the video again. The demo below shows clickable overlays on a product video.
What does overlay mean?
In everyday use, an overlay is anything laid over something else so that both show at once, like a clear sheet of notes on top of a map. A digital overlay is the screen version: graphics drawn on top of a camera feed, a game stream, or a video. In video work, the overlay is the top layer and the footage underneath is the base.
What is an overlay in video editing?
Editing apps stack video on tracks, and anything on a higher track covers what sits below it. An overlay is a title, graphic, or second clip placed on a track above the main footage. Adobe's Premiere Pro help states the rule for transparent clips: a clip with an alpha channel has to sit on a higher track than the clips meant to show beneath it.
How much of the base video shows through depends on the overlay's transparency, its opacity setting, and its blend mode. Transparency comes from an alpha channel, which stores which pixels are see-through. A PNG logo has one, and among Apple's ProRes formats only ProRes 4444 and 4444 XQ carry it for video. Opacity fades the whole layer. A blend mode mixes the layer's pixels with the footage below: Screen drops out black, which is why light leaks and lens flares come on black backgrounds, and Multiply drops out white, which suits paper and grain textures.
| Type | What it shows | Typical use | How you make it |
|---|---|---|---|
| Text or title | Words over the footage | Prices, steps, key numbers | The editor's text tool |
| Lower third | A name or label in the bottom third of the frame | Speaker names, locations | Text on a shape or bar |
| Logo or watermark | A small brand mark in a corner | Branding and ownership | PNG with transparency |
| Image or graphic | A still picture over part of the frame | Product close-ups, diagrams, icons | PNG or JPG on an upper track |
| Picture-in-picture | A second video in a smaller window | Webcam over a screen recording | Second video track, scaled down |
| Texture or effect | Full-frame footage mixed into the base | Light leaks, film grain, dust | Video file plus a blend mode |
| Captions | The spoken words as text | Accessibility and sound-off viewing | SRT or VTT file, or burned-in text |
| Interactive overlay | A clickable element drawn by the video player | Buttons, hotspots, questions, forms | An interactive video platform |
Apart from caption files kept beside the video, the editing overlays above become part of the video file when you export. Interactive overlays stay separate from the file, which is why they can be clicked, tracked, and changed after you publish.
How to overlay one video on another
Place the second clip on the track above the main footage, then decide how it should combine. For picture-in-picture, scale the upper clip down and move it to a corner with the editor's position and scale controls. For a light leak or grain effect, leave it full frame and set its blend mode to Screen or Multiply. If the upper clip was shot on a green screen, apply the editor's chroma key effect to remove the green.
How to add a price overlay to a video
Pick the method by how often the price changes and where the video will play. A burned-in price is part of the file, so it shows everywhere the file plays, and changing it means editing and exporting again. A player overlay sits on top of the video in an interactive player, so you can change it at any time and link it to checkout, but it only appears where that player is embedded or shared.
| Method | When the price changes | Clickable | Best for |
|---|---|---|---|
| Text layer in a video editor | Edit and export again | No | One product with a stable price, social uploads |
| FFmpeg overlay from the command line | Run the command again | No | Many product videos at once |
| YouTube Shopping product tags | Set in the store, not in the video | Yes, opens the tagged products | Channels that meet YouTube's shopping requirements |
| Interactive player overlay | Edit it in the player, no export | Yes, can open a cart or checkout | Your website, email, sales pages, and training |
Add a price in a video editor
- Put the product clip on the timeline and move the playhead to the first frame where the product is clearly visible.
- Add a text layer above the clip.
- CapCut desktop: open the Text panel and select the plus icon.
- Premiere Pro: draw with the Type tool in the Program Monitor, then style the text in the Properties panel.
- DaVinci Resolve: drag Text+ from the Titles group in the Effects library onto a track above the clip.
- iMovie on a Mac: drag a title from the Titles browser to the timeline above the clip.
- Canva: choose Text, then Add a text box, and drag the text's edges on the timeline to set its timing.
- Type the price exactly as your store shows it, with the currency symbol, for example $49.99.
- Style it to read over any background. Use a bold sans-serif font and put a solid or semi-transparent box behind the text, because a moving background changes contrast from frame to frame.
- Place it inside the graphics-safe area. The European Broadcasting Union's R 95 safe-area guideline keeps graphics 5% in from every edge, which is 96 pixels on each side and 54 pixels at the top and bottom of a 1920 by 1080 frame. Keep the price off the product, off faces, and away from where social apps draw buttons and captions.
- Set the timing. The BBC subtitle guidelines treat about 0.3 seconds per word as the minimum time to read text on screen. A price competes with the product for attention, so treat that as a floor and keep the price up for the whole product shot.
- Export, then watch the result on a phone at full speed before you post it.
If you show a sale price next to a crossed-out former price, the former price must be real. The FTC's Guides Against Deceptive Pricing say a former price is a fair comparison only if you openly offered the product at that price for a reasonably substantial period. A burned-in "was" price also goes stale the day the sale ends, which is one more reason to keep promotional prices out of the video file.
Add the same price overlay to many videos with FFmpeg
If you sell dozens of products, script the overlay. Export the price tag as a PNG with a transparent background from any design tool, then use FFmpeg's overlay filter. We tested this command with FFmpeg 8.1.1. It places price-tag.png in the bottom-right corner, inside the 5% safe margin of a 1920 by 1080 video, from second 2 to second 9:
ffmpeg -i product.mp4 -i price-tag.png -filter_complex "[0:v][1:v]overlay=x=W-w-96:y=H-h-54:enable='between(t,2,9)'" -c:a copy product-price.mp4In the overlay filter, W and H are the video's width and height, and w and h are the image's. FFmpeg re-encodes the video to draw the tag and copies the audio unchanged, so keep your original file. To process a catalog, make one PNG per product and run the command in a loop. We used the overlay filter rather than drawtext because some FFmpeg builds ship without drawtext, including the one we tested.
Tag products on YouTube
On YouTube, product tagging adds a Shopping button to long videos and a product sticker to Shorts, and viewers select it to see the products you tagged. Your channel and video must meet YouTube's shopping requirements. For example, the video must be eligible for monetization and not marked as made for kids. For products from other brands, the retailer sets the final price. Use it when YouTube is where the video lives.
Add a price overlay you can change later
An interactive overlay keeps the price outside the video file. In Mindstamp, you add a text overlay, an image, or a button at the timecode where the product appears and drag its start and end points on the timeline. When the price changes, you edit the text, and the next viewer sees the new price. Nothing is exported again.
Three additions make a price overlay more useful than a burned-in one:
- A button or a hotspot over the product can add it to a Shopify cart inside the video. The video pauses, the cart opens with the product, and the viewer can keep watching or go to checkout, where your store sets the price (Shopify setup steps). A Card can show product details with its own action buttons.
- On supported plans, personalization variables can show a different price per link. They fill text such as
Your price: ${{price}}from the link, so a link ending in?price=39shows "Your price: $39" to that viewer. Add a fallback, as in${{price|39}}, for links without a price. Anyone can edit a link, so use this for display only and let checkout use your store's real price (how variables work). - Viewer-level reports record each click with its timecode, so you can compare how many viewers reached the price with how many selected it.
For product videos built around this idea, see how hotspots in e-commerce product videos link a product to its page, and the shoppable video use case.
Where to find video overlays
Stock libraries and editing apps sell or give away overlay packs, such as light leaks, film grain, and animated lower thirds. Search for the effect name plus "overlay" or "alpha channel," then check two things before you download. First, check the format. A file with real transparency usually comes as a MOV in ProRes 4444 or a WebM file, while light leaks and grain usually come on black or gray backgrounds and need a blend mode. Second, read the license and confirm it allows commercial use if the video promotes a business.
Text, logos, and price tags are easier to make yourself. Design them in your editor or any design tool, and export graphics as PNG files with transparency.
Interactive video overlays
An interactive overlay is drawn by the player at playback time, so the viewer can act on it. Mindstamp places buttons, hotspots, questions, and other interactions on a timeline over a video you already host or upload. A click can open a link, jump to another point in the video, or start video branching to a different video. Our guides to adding call-to-action buttons and what buttons can do beyond links cover the details.
Interactive overlays also keep training and product videos current. When a policy, a feature name, or a price changes, you edit the overlay and leave the footage alone. We explain that approach in future-proofing video content.
Overlay design checklist
- Give each overlay one job: name a step, show a number, or ask for an action.
- Keep text short enough to read before it disappears. If viewers need to pause to read a paragraph, move that detail to a linked page or a pop-up.
- WCAG 2.2 asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, and a box behind the text keeps that ratio over moving footage.
- Keep overlays off faces, the product, and the player controls.
- Make clickable overlays look clickable, with a label that says what happens next.
- Preview at phone size with larger text and click targets, and do not rely on hover.
Overlays and captions do different jobs. Captions carry the spoken words for viewers who cannot hear the audio. An overlay adds context or a next step that may never be spoken. Keep captions on important dialogue even when an overlay repeats its main idea.
Common questions about video overlays
How much text should a video overlay contain?
Use the fewest words that keep the meaning, with one idea per overlay. A price, a product name, or a three-word instruction reads at a glance. Anything longer belongs in a linked resource or an interaction that pauses the video on purpose.
Can I change a price overlay after I publish the video?
Only if the price is a player overlay. A burned-in price is part of the pixels, so you have to edit the project, export a new file, and upload it again. A player overlay can be edited at any time.
Do video overlays work on mobile?
Yes, but preview them at phone size. Text that reads well on a laptop can be too small on a phone, and overlays near the edges can collide with app controls.
Can overlays branch to different video content?
Yes. In an interactive player, a button, image, or hotspot can send the viewer to another part of the video or to a different video. This works well for product selection and self-guided support. Browse all interactive video features to compare overlay types.
Sources and further reading
- invideo, video marketing statistics: a roundup of third-party survey figures on video viewing and marketing use, cited in an earlier version of this article.
