Incorporating video into marketing strategy is ever growing. An incredible 87% of consumers say video quality impacts their trust in a brand, and 82% are convinced to purchase after watching a product video. Clearly, videos help convey your brand’s story.
But what about background videos? They’re an option for quick messaging, can improve your site’s search engine rankings (with the right meta data), and inject some personality into your website. They can, however, impact performance if not handled carefully.
In this blog post, we’ll learn how to add a background video using Cloudinary and apply different techniques for optimization, so we can reduce the file size without compromising on quality.
Before we start, make sure you’ve signed up for a free Cloudinary account and have a video file to work with.
Let’s start by uploading our video to Cloudinary. We’ll need it as the source for our media.
Head to cloudinary.com and log in to your account. Then go to your media assets and click the Upload.
Select your video and image and upload them.
We’ll change the video source to use the video URL from Cloudinary. After adding it to our page and refreshing, we can see the video displayed as a background.
<video autoplay muted loop>
<source src="https://res.cloudinary.com/flfdev/video/upload/v1726841350/216058_medium_nxvbmk">
Your browser does not support the video tag.
</video>
Code language: HTML, XML (xml)Video by JOAO CARLOS OLIVEIRA DA SILVA from Pixabay
Much better. However, if we inspect how much data is downloaded, we’ll see that our video isn’t optimized and we’re downloading much more data than we’d want.
One of the first things we can start optimizing is the format. It’s possible to change the format based on the extension added at the end. For example, changing the source to https://res.cloudinary.com/flfdev/video/upload/v1726841350/216058_medium_nxvbmk.webm would return a webm version of the file, however compatibility should be accounted for.
Fortunately, Cloudinary provides a way to pick the best format based on browser conditions.
To enable auto selection of format we can use f_auto:<media_type> to apply a transformation.
Our URL now becomes https://res.cloudinary.com/flfdev/video/upload/f_auto:video/v1726841350/216058_medium_nxvbmk, applying the automatic_format_selection transformation.
If you want to be explicit about what types can be used we can use multiple sources and let the browser pick the first one it supports.
<video autoplay muted loop>
<source src="https://res.cloudinary.com/flfdev/video/upload/v1726841350/216058_medium_nxvbmk.webm">
<source src="https://res.cloudinary.com/flfdev/video/upload/v1726841350/216058_medium_nxvbmk.mp4">
<!--
<source src="https://res.cloudinary.com/flfdev/video/upload/f_auto:video/v1726841350/216058_medium_nxvbmk">
-->
</video>
Code language: HTML, XML (xml)We can optimize our video based on quality. Like we did previously with format, we can also provide a specific value, but we can opt for an automatic handling of this value. This will control the amount of compression of the video.
Possible values include values like q_80 or q_auto.
If we were using the f_auto transformation to specify more than one transformation, we’d separate them with commas.
<video autoplay muted loop>
<source src="https://res.cloudinary.com/flfdev/video/upload/q_auto:best/v1726841350/216058_medium_nxvbmk.webm">
<source src="https://res.cloudinary.com/flfdev/video/upload/q_auto:best/v1726841350/216058_medium_nxvbmk.mp4">
<!--
<source src="https://res.cloudinary.com/flfdev/video/upload/f_auto:video,q_auto:best/v1726841350/216058_medium_nxvbmk">
-->
</video>
Code language: HTML, XML (xml)Besides format and quality, it’s possible to choose the video codec, but, like we did with the quality, we can let Cloudinary’s algorithm pick the best option based on the browser information. Note that when using other transformations, vc_auto is already applied so it doesn’t need to be added explicitly.
Videos are a series of still images (frames). The speed at which those frames change is the frame rate. The more frames we need to display per second, the larger the amount of data we need to transmit. You can tweak those values to suit our background video. We’ll use the fps_<frames> to adjust the number of frames per second.
<video autoplay muted loop>
<source src="https://res.cloudinary.com/flfdev/video/upload/q_auto:best,fps_24/v1726841350/216058_medium_nxvbmk.webm">
<source src="https://res.cloudinary.com/flfdev/video/upload/q_auto:best,fps_24/v1726841350/216058_medium_nxvbmk.mp4">
<!--
<source src="https://res.cloudinary.com/flfdev/video/upload/f_auto:video,q_auto:best,fps_24/v1726841350/216058_medium_nxvbmk">
-->
</video>
Code language: HTML, XML (xml)This may sound a bit obvious, but the longer the video, the larger amount of data to download. Our video is 33 seconds long, but I think 15 seconds is more than enough to achieve the desired effect. Let’s set the duration of our video. To limit the length of a video to n seconds, we’ll use the du_<n> transformation. So let’s add it to our URL.
<video autoplay muted loop>
<source src="https://res.cloudinary.com/flfdev/video/upload/q_auto:best,fps_24,du_15/v1726841350/216058_medium_nxvbmk.webm">
<source src="https://res.cloudinary.com/flfdev/video/upload/q_auto:best,fps_24,du_15/v1726841350/216058_medium_nxvbmk.mp4">
<!--
<source src="https://res.cloudinary.com/flfdev/video/upload/f_auto:video,q_auto:best,fps_24,du_15/v1726841350/216058_medium_nxvbmk">
-->
</video>
Code language: HTML, XML (xml)Finally, we should take into consideration the size of our video. Is our video full screen or is it limited to a maximum width or height?. Are we using a different aspect ratio?
All of these parameters can be adjusted and will affect how much data is sent.
Transformations like ar_16:9 or ar_4:3 will crop our video to match the desired aspect ratio. w_<pixels> or h_<pixels will set the width and height to a fixed number of pixels. By default changing the height or width will scale the video, but you can change that behavior.
<video autoplay muted loop>
<source src="https://res.cloudinary.com/flfdev/video/upload/q_auto:best,fps_24,du_15,w_1280/v1726841350/216058_medium_nxvbmk.webm">
<source src="https://res.cloudinary.com/flfdev/video/upload/q_auto:best,fps_24,du_15,w_1280/v1726841350/216058_medium_nxvbmk.mp4">
<!--
<source src="https://res.cloudinary.com/flfdev/video/upload/f_auto:video,q_auto:best,fps_24,du_15/v1726841350/216058_medium_nxvbmk">
-->
</video>
Code language: HTML, XML (xml)In this blog post, we’ve learned some techniques to deliver the best experience for users, with great quality videos but sending the right amount of data.
After uploading and optimizing the video, we reduced the file size from approximately 58 MB to 1.1 MB. This dramatic reduction leads to faster load times and a more seamless user experience.
Deliver optimized visual media assets in the format and quality best suited for any device, browser, and connection speed. Contact us today to learn more.
If you found this blog post helpful and want to discuss it in more detail, head over to the Cloudinary Community forum and its associated Discord.
