Bunny Stream: video hosting pro Webflow, Framer, WordPress i vibe coding

Na videa na webech klientů používám Bunny Stream. Je rychlý, nemá cizí logo, neplatíte paušál a funguje na jakékoli platformě, kam jde vložit kus HTML: Webflow, Framer, WordPress, Shopify, Wix i weby postavené v Lovable, Boltu nebo v0. V tomhle článku najdete, co Bunny Stream umí, kolik reálně stojí a jak ho zapojit na vaší platformě.

Co je Bunny Stream

Bunny Stream je video hosting evropské firmy Bunny.net se sídlem ve Slovinsku. Nahrané video automaticky převede do několika rozlišení až po 4K a přehrává ho přes HLS: přehrávač průběžně volí kvalitu podle rychlosti připojení, takže video začne hrát rychle i na mobilních datech. Doručuje ho Bunny CDN ze serveru, který je nejblíž návštěvníkovi.

Není to sociální síť jako YouTube. Je to infrastruktura pro weby a aplikace, které chtějí mít videa pod vlastní kontrolou.

Co Bunny Stream umí

• Automatický převod do více rozlišení, bez poplatku za encoding.
• HLS streaming s kvalitou podle připojení návštěvníka.
• Přehrávač bez cizího brandingu s vaší barvou, náhledem, titulky a kapitolami.
• Přímé MP4 soubory (MP4 Fallback) pro video na pozadí nebo vlastní přehrávač.
• Ochranu videí přes povolené domény a podepsané odkazy s tokenem.
• API, webhooky a obnovitelné nahrávání (TUS) pro aplikace, kam videa nahrávají uživatelé.
• Statistiky přehrání a sledovanosti u každého videa.

Bunny Stream, Vimeo, YouTube, nebo Wistia

• YouTube je zdarma a přinese dosah, ale na vašem webu ukazuje své logo, doporučená videa a nahrává skripty Googlu. Parametr rel=0 doporučení nevypne, jen je omezí na váš kanál.
• Vimeo má čistý přehrávač bez reklam, ale platíte měsíční paušál bez ohledu na to, kolik se videa přehrávají.
• Wistia vyniká marketingovými statistikami, cenou ale míří na marketingové týmy.
• Bunny Stream se platí podle spotřeby, přehrávač nese váš vzhled a videa jsou díky adaptivnímu streamingu rychlá. Dosah vám ale nepřinese, nemá vlastní publikum.

Kolik Bunny Stream stojí

• Úložiště od $0,01 za GB měsíčně v každém regionu.
• Přenos videa od $0,005 za GB podle zvolené sítě.
• Převod do rozlišení a přehrávač jsou zdarma.
• Minimální platba je $1 měsíčně, prvních 14 dní je zkušební verze bez platební karty.

Příklad: 10 videí po 3 minutách v 1080p zabere i se všemi rozlišeními zhruba 2 až 3 GB. Při 1 000 přehráních měsíčně přenesete desítky GB, takže účet vyjde pod jeden dolar a zaplatíte minimum $1. Cena roste až s opravdu velkou sledovaností. Aktuální ceny najdete v ceníku Bunny Stream.

Jak začít: knihovna a první video

1. Založte si účet na Bunny.net. Prvních 14 dní je zdarma a bez karty.
2. Vytvořte Stream knihovnu (Stream → Add Video Library). Pro české publikum dejte úložiště do Evropy, třeba do Frankfurtu. Běžnému webu stačí jeden region, každý další zvyšuje cenu úložiště.
3. Nahrajte video přetažením, přes API nebo z URL. Převod do všech rozlišení trvá pár minut.
4. Nastavte přehrávač v knihovně: barvu podle brandu, ovládací prvky, jazyk a titulky.
5. Vyplňte povolené domény v bezpečnostním nastavení knihovny, aby vaše videa nešla vložit na cizí web.

Embed kód, který funguje všude

Na každé platformě vložíte stejný kus HTML. Doporučuji responzivní verzi s parametry pro rychlost:

<div style="position:relative;padding-top:56.25%;">
  <iframe src="https://iframe.mediadelivery.net/embed/LIBRARY_ID/VIDEO_ID?autoplay=false&preload=false&responsive=true"
    loading="lazy"
    style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;"
    allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
    allowfullscreen></iframe>
</div>

LIBRARY_ID a VIDEO_ID najdete v detailu videa. Hodnota padding-top:56.25% drží poměr stran 16 : 9, u videa na výšku použijte 177.78%. Parametr preload=false zajistí, že se video stahuje až po kliknutí na přehrát, a loading="lazy" odloží načtení přehrávače, dokud se k němu návštěvník nedoskroluje.

Bunny Stream na různých platformách

Webflow

Embed vložíte do elementu Code Embed. V CMS ukládejte jen ID videa do textového pole a napojte ho do embedu přes Add Field. Podrobný postup včetně videa na pozadí a CMS najdete v návodu Jak hostovat videa ve Webflow.

Framer

Přetáhněte na plátno komponentu Embed, přepněte ji na HTML a vložte embed kód výše. Pro video na pozadí zapněte v Bunny MP4 Fallback a odkaz na MP4 soubor použijte jako zdroj videa místo nahraného souboru. Framer pak video nenese ve vlastním projektu a stránka zůstane lehká.

WordPress

Embed kód vložte do bloku Vlastní HTML v editoru Gutenberg. Bunny.net má pro WordPress i oficiální plugin. Na videa ale nepotřebujete žádný další plugin, a to je u WordPressu výhoda sama o sobě.

Shopify

V editoru šablony přidejte sekci Custom Liquid a vložte do ní embed kód. Hodí se na produktová videa, která na Shopify jinak zatěžují stránku produktu.

Wix a Squarespace

Ve Wixu použijte prvek Vložit HTML (Embed HTML), ve Squarespace blok Code. Obě platformy vložený iframe zobrazí bez úprav.

Lovable, Bolt, v0 a další vibe coding nástroje

AI nástroje vložené video zvládnou dobře, když jim dáte přesné zadání. Funguje třeba tohle:

Na homepage přidej sekci s videem. Použij Bunny Stream iframe https://iframe.mediadelivery.net/embed/LIBRARY_ID/VIDEO_ID?autoplay=false&preload=false&responsive=true s loading="lazy" v responzivním obalu 16 : 9. Žádný jiný přehrávač ani knihovnu nepřidávej.

Pozor na jednu věc: API klíč Bunny nikdy nepatří do kódu, který běží v prohlížeči. Pokud mají videa nahrávat uživatelé aplikace, ať AI vytvoří serverovou funkci, která video založí přes API a prohlížeči vrátí jen podpis pro nahrání přes TUS. Klíč zůstane na serveru.

Astro, Next.js a vlastní kód

Ve vlastním kódu můžete použít iframe, nebo si postavit vlastní přehrávač nad HLS (playlist.m3u8) s knihovnou hls.js. Pro aplikace se hodí i webhooky, které ohlásí, kdy je video převedené. Jak Bunny.net využít pro celé aplikace, popisuji v článku Bunny.net pro aplikace.

Video na pozadí přes Bunny Stream

Na hero video nebo smyčku iframe nepoužívejte. V nastavení knihovny zapněte MP4 Fallback a Bunny ke každému videu vytvoří přímé MP4 soubory. Pak stačí obyčejný HTML tag:

<video autoplay muted loop playsinline preload="metadata"
  poster="https://vz-XXXX.b-cdn.net/VIDEO_ID/thumbnail.jpg">
  <source src="https://vz-XXXX.b-cdn.net/VIDEO_ID/play_720p.mp4" type="video/mp4">
</video>

Adresu vz-….b-cdn.net najdete v knihovně jako CDN hostname. Atributy muted a playsinline jsou nutné, jinak mobilní prohlížeče automatické přehrání zablokují.

Kdy Bunny Stream nepoužít

Pokud chcete, aby vás lidé našli přes vyhledávání na YouTube, Bunny vám ho nenahradí. Dává smysl obojí: video na YouTube kvůli publiku, na webu přehrávač z Bunny kvůli rychlosti a čistému vzhledu.

Na všechno ostatní, tedy showreel na homepage, produktová videa, reference klientů, kurzy nebo videa nahraná uživateli aplikace, je Bunny Stream nejlepší řešení, jaké jsem zatím vyzkoušel.