The first thing most people think of when they think of videos on the web is YouTube. It’s the de facto service that many digital marketers use, and they use it for a good reason. YouTube has a massive audience, and Google Search returns videos hosted on YouTube more than any other platform or site.
YouTube does have downsides, though. Their videos have ads, and its player and privacy options are limited. To avoid ads and get the most feature-rich players, one should consider using Vimeo or Wistia instead. However, Vimeo and Wistia can be expensive if you only want to add videos to articles.
That’s where Cloudflare Stream comes in. They provide cheap pay-as-you-go video streaming with the following features:
- Support for almost every video format such as H.264, H.265, ProRes, and VP9
- Automatic encoding of videos to create multiple sizes and quality levels for any device
- Feature-rich HTML5 player that supports adaptive bitrate streaming, subtitles and AirPlay
- Utilizes Cloudflare’s global network for high availability in every region
I’ve been using Cloudflare Stream for most of the videos I embed on Coywolf News, Reviews, and Pro. In June 2020, I had a Coywolf News article get on the front page of Reddit, which provided the first real-life load test of my WordPress performance optimizations and Cloudflare Stream videos.
This case study describes how the site performed and how much it costs to serve multiple autoplay videos via Cloudflare Stream for over a hundred thousand visitors within a short period.
How to use Cloudflare Stream
Cloudflare Stream is available to any account type. To enable it, click on the Stream option in the primary nav. Stream requires a minimum monthly fee of $5 for the first 1,000 minutes of video stored on its servers. The size of the video files doesn’t matter, only the length of time on the videos.
The simplest way to add a video is to drag it onto the page. It will immediately begin uploading the video.
Once the file is uploaded, I recommend adding a clear and memorable name for the video. It will make it easier to find at a later time if you end up adding a lot more videos. I also like to add the domain where the video will be embedded to remove unauthorized sites’ ability to stream it elsewhere.
The embed options are fairly straight forward. I typically use short videos in place of animated gifs because they look better, and the player adjusts to the visitor’s network connection. The embed settings I usually use are autoplay, loop, preload, and mute, and I have controls unchecked. After you choose the settings, click on the embed code to copy and paste it.
For the article that got on the front page of Reddit, I added two videos to the second half of the post. They both used the embed settings described in the previous paragraph. Although I have both videos looping, I only get charged for the first time each of them plays. That’s because I’m using preloading, and the videos are cached on the client’s computer.
There’s one option that’s not obvious, but you may want to take advantage of. You can control the thumbnail image that’s used for the video by using the
poster attribute and specifying a frame from the video using seconds. For example, if I want to use a frame from 1 minute and 23 seconds, I would add
poster="https://videodelivery.net/[video-id]/thumbnails/thumbnail.jpg?time=83s to the
stream element. It would make the embed code look similar to this:
Cloudflare Stream performance and cost
On June 5, 2020, my article on how to use smart lights to stop people from interrupting your conference calls at home got on the front page of Reddit. That resulted in over 100k visits and page views within 12 hours.
The highest traffic peak was 16k page views in one hour, and Fathom’s real-time reporting showed over 1,400 visitors accessing the article at the same time.
Coywolf News is hosted on WP Engine and uses the same theme as the Coywolf Starter Theme. The article that was on the front page of Reddit had two short videos that were set to preload, autoplay, and loop, and they used Cloudflare Stream to deliver them. The most astounding thing I observed during the entire spike in traffic was that the site and the article performed as if nobody was accessing it.
The site maintained the same speed and performance it would have if only one person was accessing it. It ultimately proved all of my theories to be true. I have no doubt now that it could take tens times the traffic it had that day and still perform precisely the same.
After the event, I was curious about how much it costs to serve two looping videos for over a hundred thousand visitors. I was pleasantly surprised that the total cost was $37. It was a drop in the bucket compared to the Amazon affiliate revenue the article made that day.
Cloudflare Stream has become an essential tool for affordably streaming high-quality video on my sites. I encourage you to test it out on your sites and to consider it as an alternative to animated gifs and using YouTube, Vimeo or Wistia embeds.