---
title: "Add a video | JavaScript maps SDK"
description: "Display videos overlaying a satellite raster baselayer on maps."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Add a video
Display a video on top of a satellite raster baselayer. Click the map to play and pause the video.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const videoStyle = {
'version': 8,
'sources': {
'satellite': {
'type': 'raster',
'url':
`https://api.maptiler.com/tiles/satellite-v2/tiles.json`,
'tileSize': 256
},
'video': {
'type': 'video',
'urls': [
'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4',
'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'
],
'coordinates': [
[-122.51596391201019, 37.56238816766053],
[-122.51467645168304, 37.56410183312965],
[-122.51309394836426, 37.563391708549425],
[-122.51423120498657, 37.56161849366671]
]
}
},
'layers': [
{
'id': 'background',
'type': 'background',
'paint': {
'background-color': 'rgb(4,7,14)'
}
},
{
'id': 'satellite',
'type': 'raster',
'source': 'satellite'
},
{
'id': 'video',
'type': 'raster',
'source': 'video'
}
]
};
const map = new Map({
container: 'map',
minZoom: 14,
zoom: 17,
center: [-122.514426, 37.562984],
bearing: -96,
style: videoStyle
});
let playingVideo = true;
map.on('click', function () {
playingVideo = !playingVideo;
if (playingVideo) map.getSource('video').play();
else map.getSource('video').pause();
});
```
#### index.html
```html
Add a video | NPM example | MapTiler SDK JS
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Add a video
```
## Related examples
### [Raster layer](https://docs.maptiler.com/sdk-js/examples/raster-layer/)
Tutorials
Add a raster image overlay to the map.
### [Animate a series of images](https://docs.maptiler.com/sdk-js/examples/animate-images/)
Examples
Create animations using a sequence of image map sources.
### [Weather wind layer](https://docs.maptiler.com/sdk-js/examples/weather-wind/)
Examples
Visualize weather wind layer and get wind speed.
### [Update a feature in realtime](https://docs.maptiler.com/sdk-js/examples/live-update-feature/)
Examples
Change an existing feature on your map in real-time by updating its data.