How to leverage Cloudflare Stream for high-availability and low-cost video streaming

Cloudflare is best known for protecting and optimizing site performance, but they have a lesser-known scalable video streaming service that is full-featured and affordable.

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:

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.

Cloudflare Navigation
Accessing Stream from theCloudflare navigation

The simplest way to add a video is to drag it onto the page. It will immediately begin uploading the video.

Cloudflare Stream Upload
Drag video files to upload them to Cloudflare Stream

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.

Cloudflare Stream Options
Cloudflare video and player embed options

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.

Videos being served by Cloudflare Stream (just like this video)

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:

<stream poster="https://videodelivery.net/14da8d0815889b55549f7d62fe3051f1/thumbnails/thumbnail.jpg?time=83s" src="14da8d0815889b55549f7d62fe3051f1" preload autoplay loop mute></stream>
<script data-cfasync="false" defer type="text/javascript" src="https://embed.videodelivery.net/embed/r4xu.fla9.latest.js?video=14da8d0815889b55549f7d62fe3051f1"></script>

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.

June 5 2020 Traffic
Traffic results for Coywolf News in Fathom Analytics

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.

Fathom Visits
Screenshot taken during peak traffic from Reddit’s front page

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 Invoice
Cloudflare Stream fees

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.

Related Articles

Jon is the founder of Coywolf and the EIC and the primary author reporting for Coywolf News. He is an industry veteran with over 25 years of digital marketing and internet technologies experience. Follow @henshaw