Introduction to Video Uploads and Transformations with Cloudinary’s Management Console

Tutorial Sections:

• Watch a Video Tutorial
• Upload the Video Content
• Transform the Video Content

In this short tutorial, you’ll see how take a video you’ve produced and get it into Cloudinary’s Management Console. Additionally, you’ll see how to apply basic transformations for aesthetic and web optimization purposes.

Watch a Video Tutorial

Upload the Video Content

On this desktop, there is a MP4 that needs to placed on a website. The file is decently large. As you can see from inspecting it, it is more than 52 megabytes.

However, Cloudinary is able to easily store this file and easily serve it to your visitors.

1. Log into the Cloudinary Management Console (https://cloudinary.com/console)

2. Select the Media Library tab (https://cloudinary.com/console/media_library/folders/all/)

3. Navigate all the way to the console’s right side and select the Upload button.

4. Select the .mp4 from the desktop.

5. Once uploaded to Cloudinary, the video should appear in the list of Media Library items.

This process will work for most video-based file formats. However, some of these formats may not necessarily be best suited for web and mobile usage. So, Cloudinary can dynamically convert and normalize the file to the relevant web formats, then encode the files for different web browsers and mobile devices.

Go back to the top of the tutorial.

Transform the Video Content

Optimization

Now that the file is in Cloudinary, you can make transformations to it for optimization, right from the Console. To do so, select the Edit icon on the file in the Media Library.

One of the more commonly useful transformations to apply is through the video_codec parameter and setting it to “auto”. This allows Cloudinary to normalize the MP4 and optimize the video for web, including its audio settings. To do so, go to the “Video Codec” dropdown field in the Edit section and select “Auto” from the list.

Notice the URL structure changes as you make these transformations.

This one transformation took the original file and significantly decreased the size to about 10 megabytes, making it much faster for people to view the content without any major change to the quality.

Depending on the viewer’s browser choice and Internet connection speed, the .mp4 would load differently for each person, thanks to this video codec transformation.

Go back to the top of the tutorial.

Aesthetics

You can also apply aesthetic changes to the video from here too. As an example, you can overlay a logo and place it in the southeast corner of the video.

1. Find the public ID for the image you want to overlay onto your video, then copy it.

2. Go back to the Edit section for your video.

3. Select the “Add overlay & watermark…” section.

4. Paste the overlay public ID from step 1 into the “Image ID” field.

5. Select “Southeast” from the Gravity dropdown field.

6. Select the Refresh Preview button on the video player.

The logo should now be visible on the video preview.

Notice this aesthetic transformation can be done in conjunction with the earlier video codec optimization, chaining together endless opportunities for file customization.

Now, simply select the URL to see the derived file with all of your transformations.

And of course, you can download the file with these transformations to your local storage right from your browser.

This has been a quick review of the video management opportunities available from Cloudinary in the Management Console. Take the time to log into your account (https://cloudinary.com/console) and see how you can handle your own use-cases.

Go back to the top of the tutorial.