> ## 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.

# Video Player in Svelte (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/svelte-video-player

## Overview

This video tutorial teaches you how to customize and embed the [Cloudinary Video Player](cloudinary_video_player) in your Svelte app.

## 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.
### Introduction to the Cloudinary Video Player
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | Videos can increase engagement and provide visual context, but if they are not optimized, they may slow down your site and create a poor user experience. The [Cloudinary Video Player](cloudinary_video_player) helps you deliver videos that are both optimized and customizable, directly inside your Svelte application.
|

### Adding the Video Player in Svelte
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=52 :player=cld} | Assuming you have the Svelte Cloudinary SDK set up in your application, you'll first import the Cloudinary Video Player component from the [svelte-cloudinary](https://svelte.cloudinary.dev/components/video-player) package with `import { CldVideoPlayer } from 'svelte-cloudinary';`. Then, use the component in your Svelte template, providing the public ID of the video you want to display as the `src` along with optional width and height. By default, Cloudinary optimizes the video for performance and delivery, ensuring a smooth viewing experience.|

```svelte
<CldVideoPlayer 
  width={1920}
  height={1080}
  src="samples/cd_sample_video" 
/>
```

### Customizing the Player UI
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=32 :player=cld} | You can customize the appearance of the player by adjusting properties such as colors and font family. This allows you to align the video player with your site's design and branding.
|

```svelte
<CldVideoPlayer 
  width={1920}
  height={1080}
  src="samples/cd_sample_video" 
  colors={{ 
    accent: "orange", 
    base: "#00ff00", 
    text: "#000000"
    }}
  fontFace="MonoSpace"
/>
```

### Adding transformations
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=02 :player=cld} | Transformations let you enhance your videos with overlays, watermarks, or other visual modifications. For example, you can overlay an image logo in the bottom-right corner with custom opacity. This example places a semi-transparent logo as a watermark.

```svelte
<CldVideoPlayer 
  width={1920}
  height={1080}
  src="samples/cd_sample_video"
  transformation={{
    overlay: "samples:svelte_logo",
    width: 200,
    gravity: "south_east",
    x:150,
    y:150,
    opacity: 40,
  }}
/>
```

### Customizing the Player logo
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=26 :player=cld} | The Cloudinary Video Player includes a default logo, but you can replace it with your own and specify a destination URL when the logo is clicked. This helps reinforce your branding while providing clickable navigation.
|

```
<CldVideoPlayer 
  width={1920}
  height={1080}
  src="samples/cd_sample_video"
  logo={{
    onClickUrl: "https://google.com",
    imageUrl: "/logo.png"
  }}
/>
```

### Listening to Player events
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=51 :player=cld} | The player supports event listeners such as `onPlay` and `onPause`. You can run custom logic when these events are triggered, such as logging playback activity. This gives you flexibility to track analytics, trigger actions, or integrate with other parts of your app.
|

```svelte
<CldVideoPlayer 
  width={1920}
  height={1080}
  src="samples/cd_sample_video"
  logo={{
    onClickUrl: "https://google.com",
    imageUrl: "/logo.png",
  }}
  o⁠nPause={({ player }) => {
    console.log("video is paused")
    console.log(`current time: ${player.currentTime()}`)
  }}
  o⁠nPlay={({ player }) => {
    console.log("video played")
    console.log(`current time: ${player.currentTime()}`)
  }}
/>
```

## Keep learning

> **READING**:
>
> * Read our Video Player [guide](cloudinary_video_player) and [reference](video_player_api_reference), covering every available parameter option.

> * Check out some [Video Player code explorers](code_explorers) that you can fork for trying out some sample configuration changes.

> * 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...

  
  
  
    Upload Assets in Svelte
    Upload assets to Cloudinary using the Svelte community library 
  

  
  
  
    Video Transformations
    Build an e-commerce video showcasing products, in Node.js 
  

  
  
  
    Content-aware Video Cropping
    Smartly crop a video using content-aware AI 
  

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