Videa na webu jsou jedna z věcí, kde Webflow nativně nestačí. Můžete sice přidat video přes VideoLink pole v CMS nebo embedovat YouTube, ale jakmile chcete vlastní přehrávač, rychlé načítání nebo čistý vzhled bez cizího brandingu, narazíte na zeď. Tady nastupuje Bunny.net.
Proč nevkládat videa přímo do Webflow
Webflow ukládá assety na vlastním CDN. Pro obrázky to funguje dobře, ale pro videa je to špatná volba. Velké soubory zpomalují web, nejde nastavit vlastní přehrávač a nemáte žádnou kontrolu nad tím jak se video načítá a streamuje. Soubor se buď načte celý, nebo nenačte vůbec. Výsledek: špatné Core Web Vitals, frustrovaní uživatelé a zbytečně drahý hosting.
YouTube a Vimeo jsou lepší než vlastní soubor v CMS, ale přináší jiné kompromisy. YouTube znamená cizí branding, reklamy a doporučená videa konkurence na konci přehrávání. Vimeo je drahý jakmile potřebujete víc prostoru nebo bandwidth. Ani jedno vám nedá plnou kontrolu nad přehrávačem.
Co je Bunny.net a proč ho používám
Bunny.net je CDN a video hosting platforma zaměřená čistě na výkon a cenu. Není to YouTube alternativa pro publikum, ale infrastruktura pro vývojáře a weby, kteří chtějí mít videa pod kontrolou.
Pro Webflow projekty jsou klíčové dva produkty:
Bunny Stream je vlastní video hosting s HLS streamingem. Video se načítá progressively, takže uživatel vidí první frame za sekundu i při pomalém připojení. Automatický encoding do více rozlišení (360p, 720p, 1080p, 4K), vlastní přehrávač přes embed kód nebo API, analytiky ke každému videu.
Bunny CDN je globální síť s PoP ve stovkách lokací. Videa se servírují z nejbližšího serveru k uživateli, ne z jednoho datacentra někde v USA.
Cena je pay-as-you-go, platíte za skutečně přenesená data, ne za storage nebo počet videí. Pro většinu webů vychází výrazně levněji než Vimeo Pro nebo Wistia.
Jak Bunny Stream zapojit do Webflow
Celý workflow zabere maximálně odpoledne.
1. Založte účet na Bunny.net. Registrace je zdarma, platíte až za skutečně přenesená data.
2. Vytvořte Stream knihovnu v Bunny dashboardu pod Stream. Vyberte název a region, pro CZ klienty doporučuju Frankfurt nebo Amsterdam.
3. Nahrajte video přetáhnutím nebo přes API upload. Bunny ho automaticky enkóduje do všech rozlišení, trvá to pár minut podle velikosti souboru.
4. Zkopírujte embed kód z detailu videa. Vypadá takhle:
<iframe src="https://iframe.mediadelivery.net/embed/LIBRARY_ID/VIDEO_ID"
loading="lazy" allow="autoplay" allowfullscreen></iframe>
5. Vložte do Webflow. Pro statické stránky dáte embed kód přímo do Embed elementu na canvas. Pro CMS stránky přidáte do kolekce pole Plain Text nebo Embed, do kterého ukládáte iframe kód, a na stránce ho napážete přes Embed element.
Nastavení přehrávače
Bunny Stream umožňuje přehrávač vizuálně přizpůsobit tak, aby zapadl do designu webu. V dashboardu pod Stream, vaše knihovna, Player Settings nastavíte barvu přehrávače, vlastní thumbnail, autoplay a loop chování, viditelnost ovládacích prvků a kapitoly nebo titulky.
Výsledkem je přehrávač bez cizího brandingu, který vypadá jako součást webu, ne jako embednutý YouTube.
Výkon v praxi
Na projektech kde jsem Bunny.net nasadil, se Core Web Vitals zlepšily hlavně v LCP. Video přestalo blokovat načítání zbytku stránky, Bunny Stream načítá přehrávač asynchronně a lazy-loaduje samotné video až když uživatel skrolluje blízko elementu.
Oproti přímému vložení MP4 souboru z Webflow assetu je rozdíl znatelný hlavně na mobilech a pomalejším připojení. A oproti YouTube embedu odpadá zbytečný JavaScript a tracking pixel, který YouTube vkládá do každé stránky kde je embed.
Cena, co reálně zaplatíte
Bunny.net funguje bez měsíčního paušálu. Storage vyjde na $0.01/GB/měsíc, bandwidth od $0.005/GB podle regionu a encoding pro základní rozlišení je zdarma.
Web s 10 videi průměrné délky 3 minuty a 1000 přehrávání měsíčně vyjde přibližně na $2 až $5 měsíčně. Vimeo Pro stojí $20/měsíc, Wistia začíná na $19/měsíc a limituje počet videí.
Kdy Bunny.net použít a kdy ne
Bunny Stream dává smysl pokud potřebujete vlastní přehrávač bez cizího brandingu, máte víc videí nebo videa na CMS stránkách, záleží vám na výkonu a Core Web Vitals, nebo nechcete platit Vimeo paušál za bandwidth co nevyužijete.
Pokud publikujete videa primárně pro YouTube publikum a chcete organický dosah přes YouTube vyhledávání, Bunny není náhrada. V tom případě dávejte videa na YouTube a na web embedujte přes YouTube, ale schovejte doporučená videa přidáním parametru ?rel=0 na konec URL.
Pro všechny ostatní případy, vlastní showreel na homepage, videa na produktových stránkách nebo testimonial videa v CMS, je Bunny.net nejlepší volba co jsem zatím zkoušel.
