> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding videos in Next.js (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-cldvideoplayer

## Overview

Learn how to embed videos with the [Cloudinary Video Player](cloudinary_video_player) in your Next.js application, using the CldVideoPlayer component of the [Next Cloudinary](nextjs_integration) library.  

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Embed the Cloudinary Video Player
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=14 :player=cld} | 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](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](cloudinary_glossary#public_id) of the video in Cloudinary. For example:
|

```react
import { CldVideoPlayer } from 'next-cloudinary';

...

<CldVideoPlayer
    id='sea-turtle'
    width='1920'
    height='1080'
    src='samples/sea-turtle'
/>
```

### Configure the Video Player
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=39 :player=cld} | There are many options you can use to [customize and configure the Video Player](nextjs_video_transformations) to give you more control over how it looks and how it's used.
|

### Change the colors to match your branding
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=46 :player=cld} | Override the `colors` prop by setting `base`, `text` and `accent`. For example:
|

```react
<CldVideoPlayer
    ...
    colors={{
        base: '#0f0',
        text: '#000',
        accent: '#fff',
    }}
/>
```

## Keep learning

> **READING**:
>
> * Checkout the code in [GitHub](https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-cldvideoplayer).

> * See more [examples of customizing the Video Player](nextjs_video_transformations).

> * Learn more about the Cloudinary Video Player in the [guide](cloudinary_video_player) and [reference](video_player_api_reference).

> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

#### If you like this, you might also like...

  
  
  
    Using the Next.js Image Component
    Deliver images using the Next.js Image component 
  

  
  
  
    Upload Assets in React
    Upload assets using the Upload widget in a React app 
  

  
  
  
    Create Social Media Cards in Next.js
    Dynamically create social media image cards using Next.js 
  

&nbsp;

&nbsp;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.
&nbsp;