The lite script embed shows a poster image and a play button immediately. The full player JavaScript loads only when the user clicks play. The result is a much faster first paint and lower bandwidth on pages where most visitors do not press play.
The snippet
<div data-vp-embed="your-slug"></div>
<script async src="https://videoplayer.ai/embed/lite.js"></script>
That is the whole thing. The script auto-finds every data-vp-embed element on the page, fetches the poster, and renders the placeholder. When the user clicks play, the script swaps in the full player.
Why this matters
A full video player is several hundred kilobytes of JavaScript and a connection to an HLS manifest. On a page with five embedded videos, that adds up. Most viewers never click play on most of those videos. The lite embed defers all of that until the click happens.
| Embed style | First-paint cost | Cost on click |
|---|---|---|
| iframe | Full player loads on every page render | Already loaded |
| Responsive wrapper | Same as iframe | Already loaded |
| Lite script | One small script, plus a poster image | Player loads now |
When to pick this
- Pages with multiple embeds.
- Pages where most viewers will not press play (article pages, library pages).
- Pages where Largest Contentful Paint matters for SEO or Core Web Vitals.
When this is the wrong choice
- Pages where the video is the primary content and most viewers will press play.
- Embeds in environments that strip
<script>tags (most rich-text fields).