Optimize videos in React (video tutorial)

On this page:

• Overview
• Video tutorial
• Tutorial contents
  • Why optimize videos for delivery?
  • Automatic quality
  • Automatic format
  • Further optimizations
• Keep learning

Rate this page:

Overview

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

Video tutorial

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.

<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.

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

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.