Website video delivery is a sorely neglected area of Web Development with YouTube being the exception, who basically dominate the entire video delivery spectrum. As far as I know there is no other video hosting service that delivers such a pleasant viewing experience, on any device and connection speed, as does YouTube.
But YouTube doesn’t offer a private hosting service that you can restrict to your own website, the best they offer is simply an unlisted video that anyone with the URL can see. You can disable embedding on other websites but that also means your own website, so that doesn’t work out.
The only solution I found was to use a CDN (Content Delivery Network) service which offers excellent speed and reliability, along with properly encoded videos in a widely supported format that plays on any device. So let’s go through how you can do the same with your website (including WordPress or other CMS managed sites).
Encoding your videos
Encoding video is painstaking, time-consuming, and frustrating, but I will give you two options: the easy way, and the harder (manual) way. But first, lets run through some video encoding basics.
A Codec is a mathematical algorithm that aims to compress video or audio files as much as possible with the least amount of resolution/quality loss. To cut a long story short, the best codec for web delivery is H.264 (x.264 or MPEG-4 Part-10 AVC) as it has support on almost all devices and web browsers. Never use Flash as it requires both a plugin and user permission to play. Also never use AVI, MPEG-2 or MKV as they’re used for local playback, not website streaming.
File container formats are again an easy pick, MP4 is the most widely supported video format on the web (and a 99% of home media players). It easily embeds using HTML5 video tags, and offers built-in streaming capabilities. There are other container formats like OGG and WebM but they have not proven popular in the mainstream, so I recommend sticking with MP4.
Encoding (the easy way)
As I have already said, encoding a video correctly for web delivery is insanely complicated, the H.264 codec has voluminous options that are daunting. The talented guys at YouTube have the resources available to test and optimize H.264 for web delivery, so what we can do to "borrow" that effort and technology for our own use, is to simple upload our video to YouTube as a private video, let it process, and then download the fully optimized and shrunken video, and finally delete off YouTube. Follow the directions below.
- Make sure you video is already in a format that YouTube supports
- Make sure your video is in the size you need (usually 720p 1280×720 or 1080p 1920×1080)
- Create a YouTube account if you don’t already have one (click Sign In, then choose More Options > Create account)
- Go to the YouTube uploader, click the Privacy drop-down and choose Private
- Click on the large arrow and select your video file to upload
- Once your video finishes uploading, it will take a minute or two to process, copy the video URL
- To grab your new video go to: https://y2mate.com/ then paste your video URL and click Start
- Now simply download your video in your desired format (most common choices would be 720p and 1080p)
- You now have expertly optimized and shrunken video!
I can guarantee you will never be able to encode your videos as well as YouTube does. That beings said, if you want to try encoding, keep reading below.
If you want to try (or just learn more about encoding videos) I will go through some basics with you here. Firstly, I have found the best encoder app is one called HandBreak as it supports Windows, MAC, Linux and encodes in both MP4/H.264 for web and MKV for local playback. It also has some good presets that make life easier.
Open HandBreak and choose your video to encode, select a location for the re-encoded file, then from the right-side pane choose either Fast 1080p or Fast 720p (match the size of your input video). For Output Settings, choose MP4 and check the Web Optimized check box, then change the following settings (or see slideshow further below).
- (leave at defaults)
- (leave at defaults)
- Video Codec: H.264 (x.264)
- Frame rate (FPS): same as source
- Encoder Tune: Zero Latency
- Encoder Profile: High
- Encoder Level: 3.1
- Quality: Avg Bitrate (kbps): 2000
- Bitrate: 128
- SUBTITLES / CHAPTERS
- (set as required)
Now you can click Start Encode and you’ll end up with a small file sized, high quality video, optimized for web delivery.
Choosing a CDN service
CDN providers have large networks of servers (edge servers) in strategic locations around the world, which means they can delivery your video much faster than your web server can. CDN servers are also optimized for media delivery/streaming which is something you can’t do with your web server.
There are a number of CDN service providers out there and most do a good job. I will take you through how to set up an Amazon Web Services S3 Bucket and CloudFront Distribution for video delivery. Before I do that, here are some good CDN providers you can take a look at.
- Google Cloud CDN
- Amazon Web Services (S3 Bucket)
- MaxCDN (now known as StackPath)
- Akamai Technologies
Create an Amazon S3 Bucket
Let’s go through how to set up an S3 bucket to store your videos, then we’ll setup a CloudFront distribution to serve your video on CDN edge servers located close to your website visitors.
- Create an Amazon Web Services account unless you already have one, in that case sign in
- Click on Services > Storage > S3, then click Create Bucket
- Give you bucket a unique domain name (IE.
mybucket.mywebsite.com) and leave the Region option set at default US East (Ohio) and click Next
- Leave everything on Set Properties screen unselected, then click Next
- Change the Manage public permissions option to Grant public read access to this bucket, then click Next
- On the final page, review your selections, then click the Create Bucket button
- Once you bucket is created, click on the domain name link (ie. mybucket.mywebsite.com)
- You should now be inside your new bucket, click the Upload button, then click the Add Files button, then select a video to upload, then click Next
- Change the Manage public permissions option to Grant public read access to this object(s), then click Next
- Leave all options on the next screen at defaults and click Next, then review your selections and click the Upload button
- You can see the progress of your upload at the bottom of the page, please wait for it to finish before moving to the next section
Create a CloudFront Distribution
Now let’s setup our CloudFront distribution that will serve your video via edge servers located close to your website visitors, therefore speeding up delivery and making for an excellent user experience.
- Click on Services > Networking & Content Delivery > CloudFront, then click on Create Distribution
- Under the Web section, click the Get Started button
- For Origin Settings > Origin Domain Name > [click inside text-box and choose your S3 bucket domain name we created earlier, it will auto-populate]
- Change Default Cache Behavior Settings > Viewer Protocol Policy to HTTP and HTTPS
- Scroll all the way to the bottom (leave everything at defaults) and make sure Distribution State is set to Enabled
- Finally, click the Create Distribution button
- Once your CloudFront distribution is created, highlight and copy the Domain Name (ie.
- All done, you can now move on to Embedding your videos below
Embedding your videos
Standard HTML5 video embedding
For standard websites we just use some simple HTML5 video code as follows, but please note* If you want to use secure HTTPS you will need to wait 12 to 24 hours for Amazon to add your CloudFront URL to their *.cloudfront.net SSL certificate. Otherwise just use plain HTTP temporarily to make sure it’s all working, then wait for Amazon to update their certificate.
<video height="720" width="1280" preload="auto" controls>
<source src="https://d14w5t6my48805g.cloudfront.net/test.mp4" type="video/mp4">
There are a number of other HTML5 Video properties, methods and events you can use to further control your videos, but the code above is all that is really necessary for basic function.
WordPress video embed code
WordPress has its own pseudo code that is pretty much the same as HTML5, but enables WordPress to handle the video better. Use the following to embed in a WordPress based website.
[video src="https://d14w5t6my48805g.cloudfront.net/test.mp4" width="1280" height="720" poster="some-image-url.jpg" autostart="false" preload="auto"]
Check out WordPress Video Shortcode for a full explanation of available properties.
Although it’s not easy, it is well worth your time and effort to set up and use a CDN network so your website visitors experience fast, lag-free video. There is a lot more you can do with Amazon Web Services too from hosting your entire static website on their CloudFront network, to hosting a WordPress website and database too. But before you move on to those advanced options, try moving all your media content (images, audio, video etc) on separate CloudFront distributions and see how blazingly fast your website becomes!