Last updated: Aug-06-2025
OverviewLearn how to optimize the delivery of your videos with the Cloudinary AdvancedVideo component in React.
You can find the code from this tutorial in
GitHub.
Tutorial contentsThis 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 thecld.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. 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. Further optimizations Keep learning 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.
Â
âï¸ Feedback sent!
âï¸Â  ErrorUnfortunately there's been an error sending your feedback.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4