When it comes to delivering video files, we have a few choices. YouTube, Vimeo, self-hosted directly in our media library (spoiler:not a good idea) or self hosted on a third party service.
If you want to optimize performance and keep running costs really low, self hosting on Bunny.net (aka BunnyCDN), in particular, is a pretty great option.
Bunny.net is a content delivery network that provides fast and reliable delivery of static and dynamic content to users around the world. Bunny.net has three core products: Bunny CDN, Bunny Storage and Bunny Stream.
Full disclaimer: there are affiliate links in this article. My opinion is still genuine as I use all three Bunny.net products mentioned in this tutorial myself on this very website (element.how). I'm a true believer and have been recommending them for years.
Self Hosting Videos with Bunny CDN
Bunny CDN works as any CDN would. You have the files on your own server, Bunny CDN's duplicate these files on 'the edge', that is, servers scattered around the world, and then serves them from the closest server to the visitor.
It's a pretty good system, however the files aren't delivered 100% of the time from the CDN. Sometimes, they are served from the original server.
Because of this, hosting smaller files like images, CSS and JS assets is okay, but larger video files (anything over 3-4mb) would still be a significant stress on your origin server.
Going that way would also mean that your large video files are hosted on your website host, and this could also cause problems if the storage allocation is limited. Video files can take up a lot of space.
The short of it: Bunny CDN is great to use as a CDN to serve small files, but not ideal for large video files.
So, we are left with two choice when it comes to self hosting video files with Bunny.net: Bunny Storage, and Bunny Stream.
Self Hosting Videos with Bunny Storage
Bunny Storage is a file storage service that allows you to store and serve files, such as images, videos, and documents, from a global network of servers. With Bunny Storage, you can store and serve files with low latency and high performance, and you can easily scale your storage needs as your traffic grows.
Think of Bunny Storage like a Google Drive that you can serve videos from.
You will want to use Bunny Storage to self host your videos:
- When you don't need or want any kind of DRM protection
- When you don't need or want Bunny.net to take care of processing and compressing the videos for you
- When your videos are 'decoration videos', such as background videos and GIF replacement videos
- When you wish to use Elementor to show your videos*
*Essentially, anytime you wish to use Elementor native options (such as background videos and their video element) to display your self hosted video, you will need to use Bunny Storage and not Bunny Stream. This is because Bunny Stream requires a compatible video player.
Keep in mind, you will need to properly compress your video files before uploading them to Bunny storage, as the file you upload is the same that will be sent to the visitor. Contrary to Bunny Stream, Bunny won't do any processing at all on the video files uploaded to Bunny Storage.
See this medium article for how to compress your videos yourself before uploading them. Use the MP4 file format.
Self Hosting Videos with Bunny Stream
Bunny Stream is a streaming media delivery service that allows you to deliver high-quality video and audio content to your users. With BunnyCDN Stream, you can deliver live and on-demand streaming content, and you can easily scale your streaming needs as your traffic grows.
You will want to use Bunny Stream to self host your videos:
- When you want to protect your content (Enterprise-grade multi-DRM system: prevent downloads, screen recording, or even screenshots.)
- When you want Bunny to dynamically deliver your video files based on the user resources, bandwidth and internet speed, like YouTube does
- When you want Bunny to take care of compressing and formatting the video files
With Bunny Stream, you will need to use a special video player that's compatible with the service. For my CSS Course for Elementor users, I used Flow Player. The free version, along with CSS customizations, suited my needs well.
You could also use their own Bunny Player. but you would probably need a developer to integrate it in your WordPress website.
Conclusion
Go with Bunny Storage for videos that you want compatible with Elementor's video elements and background videos.
Go with Bunny Stream for videos that you want protected (to a certain extent), dynamically delivered, and compressed for you.
I hope you have enjoyed this tutorial.
Cheers!