Programmable Media

Optimize videos in React (video tutorial)

Last updated: May-08-2024


Learn how to optimize the delivery of your videos with the Cloudinary AdvancedVideo component in React.

Video tutorial

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?

Jump to this spot in the video  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

Jump to this spot in the video  0:18 Once you've installed and configured the Cloudinary React SDK, and you're using the 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

Jump to this spot in the video  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

Jump to this spot in the video  1:18 You can optimize your videos further by delivering the size you need using resize transformations.

Keep learning

Related topics

If you like this, you might also like...

Upload Assets in React
Upload assets using the Upload widget in a React App
Video Player in React
Embed the Cloudinary Video Player in a React app
Video Transformations
Build an e-commerce video showcasing products, in Node.js


Cloudinary Academy


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!

Rate this page: