Embedding a Video Player in Next.js With Next Cloudinary

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 yarn or npm by running one of the following commands:

# Using Yarn
yarn add next-cloudinary

# Using npm
npm install next-cloudinary
Code 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:

import { CldVideoPlayer } from 'next-cloudinary';
Code language: JavaScript (javascript)

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 1920 and 1080, respectively.

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.

<CldVideoPlayer
  id="sea-turtle-color"
  width="1920"
  height="1080"
  src="samples/sea-turtle"
  colors={{
    base: "#0f0",
    text: "#000",
    accent: "#fff"
  }}
/>
Code language: JavaScript (javascript)

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!