Optimize videos in React (video tutorial)
Last updated: Aug-20-2025
Overview
Learn how to optimize the delivery of your videos with the Cloudinary AdvancedVideo component in React.
Video tutorial
Video Player is loading.
This video is brought to you by Cloudinary's video player - embed your own!
View the code
You can find the code from this tutorial in GitHub.Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
Why optimize videos for delivery?
 0:00 |
Adding videos to your application can significantly add weight to your page, impacting performance and user experience. Cloudinary provides ways to reduce the weight of videos by automatically optimizing their quality and format for delivery. |
Automatic quality
| 0:18 |
Once you've installed and configured the Cloudinary React SDK, and you're using the cld.video method to create the delivery URL for your video, you can add the quality method set to auto to deliver your video with the best encoding to minimize the file size without impacting visual quality. |
React
<video
src={cld.video('video/cooking-stirfry').quality('auto').toURL()}
/>Automatic format
| 0:36 |
Use the AdvancedVideo component to deliver the video in its optimal format. This component automatically creates sources for modern formats allowing the browser to select the best format that it supports. |
React
import { AdvancedVideo } from '@cloudinary/react';
<AdvancedVideo
cldVid={cld.video(video/cooking-stirfry').quality('auto')}
/>Further optimizations
| 1:18 |
You can optimize your videos further by delivering the size you need using resize transformations. |
Keep learning
Related topics
- Read our video optimization guide to learn about delivering your videos more efficiently.
- Take a look at our React SDK for more video transformations.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
If you like this, you might also like...
Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.
✖️