Last updated: Aug-06-2025
OverviewThis video tutorial teaches you how to optimize the delivery of videos in a Next.js app by using the CldVideoPlayer component of the Next Cloudinary library, which embeds the Cloudinary Video Player.
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.
Introduction Deliver a video using an HTML video tag for comparison   0:16 Using an HTML video tag to embed a video on a webpage delivers the whole video in its original size and format. Deliver the video using the Cloudinary CldVideoPlayer component   0:46 Delivering the same video using theCldVideoPlayer component of the Next Cloudinary library, optimizes the format and quality for delivery, so a much smaller file is delivered. Crop and resize the video   2:11 In addition to optimizing the format and quality of your videos, you can resize them on the server side so that you deliver only the size you need. Specify an object in the transformation prop including the type of crop, its focus (gravity), plus the width and height.
See examples of using the CldVideoPlayer component in GitHub.
Â
Â
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