In the realm of dynamic web applications, embedding videos can often seem like a challenge, particularly if you wish to do this while retaining control over the playing experience and customizing it to fit your brand. However, the task becomes a breeze in Next.js with the introduction of the Cloudinary CldVideoPlayer component.
In this Dev Hint, we’ll cover how you can effortlessly add a video to your Next.js application using Cloudinary’s CldVideoPlayer component, including customizing its appearance. Let’s dive into this together!
To get started with the Cloudinary CldVideoPlayer Component, install Next Cloudinary using either
npm by running one of the following commands:
# Using Yarn yarn add next-cloudinary # Using npm npm install next-cloudinaryCode language: PHP (php)
This will set up the necessary tools to work with Cloudinary’s video player component in your Next.js project.
Next, navigate to the page in your Next.js project where you’d like to display the video player and import the
CldVideoPlayer component from
next-cloudinary as follows:
To embed a video using the Cloudinary CldVideoPlayer Component, start by adding the video component. Assign it an ID and set its dimensions using the width and height properties, with values of
To display a video, we’ll use the sample video “sea-turtle”, which is automatically available with every new Cloudinary account. You can do this by specifying it as the src prop
samples/sea-turtle as highlighted below:
<CldVideoPlayer id="sea-turtle-color" width="1920" height="1080" src="samples/sea-turtle" />Code language: HTML, XML (xml)
On refreshing the page, the desired video player displays our Sea Turtle video as highlighted below.
Embedding a video player is a straightforward process, but the Cloudinary CldVideoPlayer real magic lies in its vast array of customization features. After adding a basic video player to your application, it’s time to wield the full power of customization that comes with the CldVideoPlayer to align the player with your brand colors and desired aesthetics.
To customize colors, we simply override the existing colors using the
colors prop. This prop allows us to replace three colors: base, text, and accent. You can set these to match your branding. In our example, we’ll set the base color to green, text to black, and the accent color to white.
Upon refreshing the page, the changes will be instantly implemented. To further customize the player, like changing the font or adding your logo, you can check out examples in the Cloudinary documentation.
In conclusion, embedding videos in your Next.js application using the Cloudinary CldVideoPlayer component is simplicity itself, demanding no more than a few lines of code for even a novice programmer.
Incorporate videos into your Next.js application with ease and transform your user experience, one video at a time!