One of the more popular elements of a modern website design is an HTML5 video. You’ve probably seen them on Homepages. They usually sit right below the header and play automatically once you enter the site. Many times, the video is silent and provides a way to capture your visitor’s attention. The problem with these videos is that they slow down your site. However, I know a simple trick that you can use for optimizing your website HTML5 video and it’s FREE!
The Pros and Cons of Having an HTML5 Video on Your Website
Why should you even mess with having an HTML5 video on your site? First, all the cool kids are doing it (check out airbnb.com). However, if you aren’t a crowd follower, then consider the fact that having a video on your Homepage makes it look more professional. You will find that most professional web designers incorporate HTML5 videos into the client’s websites.
However, all things come with a price. Most of these videos make your site super slow and that will hurt you in many ways. (See why slow websites are bad).
Luckily there is a great trick that will let you show a perfectly formatted video, that load super-fast every time.
The Process for Optimizing Your Website HTML5 Video
To keep your website from bogging down during the video loading process, you need to compress the video properly. This also improves the image quality, ensuring a professional look.
Step #1 – Get the Video
Some companies have resources to film their own videos. For those that don’t, you can go to istockphoto.com and purchase a .mov file for roughly $60-$100. There are many to choose from and all are of a high-quality. In fact, their quality is so good that the files are 30-40 MB, which is way too big for your website. Download the file to your computer.
Step #2 – Upload the Video to YouTube
Most individuals or companies have a YouTube channel. If you don’t, it’s easy (and free) to sign up. Upload your .mov file to your YouTube channel. Make sure you set the privacy settings to ‘unlisted.’ This will keep it from showing in YouTube search results or to anyone browsing your channel. Once it’s loaded, find the link to the video and copy it.
Step #3 – Compress the Video
Go to keepvid.com and input the link. Pick .mp4 as your desired format and have them convert your file. This service is free. Once it is converted, download the video back to your computer.
What you have now is a perfectly compressed .mp4 file you can use on your website. When you upload it as your HTML5 video, you will have visual clarity and a video that loads quickly for your users. There is no need to spend lots of dollars for videography services. All you need is a legally obtained film and this tip for optimizing your HTML5 video. If you’re looking for a website redesign check out our Free Mock-Up Offer, give us a call.
SEO
