Last updated: Dec-11-2024
On this page:
Overview
Learn how to embed videos with the Cloudinary Video Player in your Next.js application, using the CldVideoPlayer component of the Next Cloudinary library.
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.
Embed the Cloudinary Video Player
0:14 | Using the Next Cloudinary CldVideoPlayer component inside a Next.js application, you can embed a video that you can play using the Cloudinary Video Player. Set the id of the Video Player to be able to call functions on it later, set its dimensions, and specify the video to play by setting src to the public ID of the video in Cloudinary. For example: |
Configure the Video Player
0:39 | There are many options you can use to customize and configure the Video Player to give you more control over how it looks and how it's used. |
Change the colors to match your branding
0:46 | Override the colors prop by setting base , text and accent . For example: |
Keep learning
Related topics
- Checkout the code in GitHub.
- See more examples of customizing the Video Player.
- Learn more about the Cloudinary Video Player in the guide and reference.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
If you like this, you might also like...
Using the Next.js Image Component
Deliver images using the Next.js Image componentUpload Assets in React
Upload assets using the Upload widget in a React AppCreate Social Media Cards in Next.js
Dynamically create social media image cards using Next.js
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.
✖️