A repeatable workflow for prepping videos so they load fast on client websites and stream cleanly from Displayee's Bunny Stream library. Follow the cheat-sheet, ship, done.
Your Bunny cost is already near-zero, so this isn't about saving money — it's about page load speed. An oversized video is the #1 thing that makes a client's site feel slow, and slow pages hurt SEO and conversions. The goal every time: the smallest file that still looks great, delivered adaptively. Right now your source files run ~18 Mbps — about 3× heavier than they need to be.
Bytes get decided at four stages. Nail all four and the video is fast everywhere, on every device.
Free tool: handbrake.fr. Pre-compressing means every rendition Bunny creates starts smaller. Use these settings — they cut an 18 Mbps file to ~5 Mbps with no visible quality loss on this kind of content.
| Setting | Use this | Why |
|---|---|---|
| Container / Codec | MP4 · H.264 | Universal — plays everywhere, encodes fast |
| Quality | Constant Quality RF 22–23 | Sweet spot: sharp but small. Lower = bigger, not always better |
| Resolution | 1080p content · 720p loops | Nobody needs 4K on a website. Cap it |
| Framerate | Same as source, 30fps peak | 60fps doubles bytes for no benefit here |
| Audio (talking video) | AAC, 128 kbps | Clear voice, small |
| Audio (muted loop) | Remove track | Silent audio still adds bytes — delete it |
| Length | Trim dead air | A 6s loop vs 20s = 3× the bandwidth, forever |
| Web Optimized | ✅ On ("Fast Start") | Lets the video start playing before it fully loads |
Two settings in your Bunny Stream library do most of the work. Find them under Stream → Encoding.
| Setting | Set to | Why |
|---|---|---|
| Resolution ladder | Enable up to 720p (loops) / 1080p (content). Disable 1440p & 4K | Stops a browser ever pulling a giant 4K rendition you didn't need |
| Encoding tier | Standard (free) | Premium buys marginally better compression; for signage-style video it's rarely worth the line item. You're currently on Premium |
| Keep original file | Off (unless you need re-downloads) | Saves storage — the HLS renditions are what actually stream |
| MediaCage / DRM | Off | Not needed for public marketing videos |
How you place the video on the page matters as much as the file. The rule: a visitor who never scrolls to the video should cost zero bytes.
<video><source src="...mp4">. HLS is adaptive — a phone on 4G auto-drops to 480p instead of pulling your full 1080p file. Raw MP4 always sends the biggest file to everyone.For a background / hero loop (muted, autoplay):
<video autoplay muted loop playsinline preload="none" poster="still-frame.jpg"> <!-- Bunny HLS source --> </video>
| Technique | What it does |
|---|---|
poster="still.jpg" | Shows an instant image; video only loads when needed |
preload="none" | Browser fetches nothing until play — big win for bounced visitors |
| Lazy-load / play on scroll or click | Content videos load only when the visitor actually reaches them |
muted loop playsinline | Required for background autoplay (esp. on mobile/iOS) |
| Token auth + referrer allow-list Bunny setting | Only your client domains can play the video — stops hotlinkers running up your bill |
Pick the profile that matches the video and apply the numbers. Done.
Run this every time you upload a client video. (Ticks save in your browser.)