---
title: Publitas interactive - YouTube video player
description: If you are working with YouTube on your website, you can easily add Spott's interactive layer by adding a script to your existing implementation. Your current video publishing process is not affected,
---
[Skip to content](https://support.publitas.com/spott-youtube-video-player#main-content)
English
Show submenu for translations
[Contact Support](https://support.publitas.com/kb-tickets/new?hsLang=en)
Open main navigation
Close main navigation
- English
Show submenu for translations
- [Contact Support](https://support.publitas.com/kb-tickets/new)
- [Back to Publitas](https://www.publitas.com/)
[Back to Publitas](https://www.publitas.com/)
How can we help you?
- There are no suggestions because the search field is empty.
1. [Knowledge Base](https://support.publitas.com/?hsLang=en)
2. [Using Publitas Interactive](https://support.publitas.com/using-publitas-interactive?hsLang=en)
3. [Integrations](https://support.publitas.com/using-publitas-interactive?hsLang=en#integrations)
# Publitas interactive - YouTube video player
If you are working with YouTube on your website, you can easily add Spott's interactive layer by adding a script to your existing implementation.
Your current video publishing process is not affected, which means you publish your videos first and add the interactive layer independently.
Our YouTube integration works by adding a code snippet to your website where your video is shown and by adding the YouTube video id in Spott.
### 1. Using Spott video ID
If you have access to your own website, this is probably the easiest option. If your website is managed by someone else, it might be best to take a look at the next solution by *using an External ID*
*Before you start these steps, make sure you've uploaded your video to the YouTube platform and added it to your website already.*
**Step 1: Upload your video to Spott and make it interactive**
You'll add interactive elements to your video in the Spott Studio. In order to do that, you should upload your video to the Spott platform.
Log into Spott and go to the [projects page](https://app.spott.ai/projects), upload your video, and make it interactive.
We have a [full step-by-step guide](https://support.publitas.com/hc/en-us/articles/360052364732?hsLang=en) for you if you haven't learned how to do this already.
**Step 2: Put this code snippet on your website**
Go to your website and put in this code snippet. Leave this page open as you still need to make some changes in *step 3.*
*JS Version:*
```
```
*iFrame Version:*
```
```
```
```
The script acts as a bridge between your player and Spott. To set this up, enter these parameters:
- A selector **player** that targets the instance of your video player.
- **videoId** inside initSpottYouTube section is the Spott ID of the video currently initialized, which we'll show you how to get in the next step.
- make sure to add "**enablejsapi=1"** to your YouTube video URL if you use the iFrame version!
**Step 3: Get the Spott video ID**
When you have uploaded your video, go to the Spott Studio, where you can copy the video ID.
Look at the URL and copy the ID, this is the last part of the URL before the '**?**' symbol. You can paste this in the videoId parameter.
Paste the Spott video ID you just copied and place in the script on your website.
Awesome, your YouTube video should now have an interactive layer!
### 2. Using YouTube ID
*Before you start these steps, make sure you've uploaded your video to the YouTube platform and added it to your website already.*
**Step 1: Upload your video to Spott and make it interactive**
You'll add interactive elements to your video in the Spott Studio. In order to do that, you should upload your video to the Spott platform.
Log into Spott and go to the [projects page](https://app.spott.ai/projects), upload your video, and make it interactive.
We have a [full step-by-step guide](https://support.publitas.com/hc/en-us/articles/360052364732?hsLang=en) for you if you haven't learned how to do this already.
**Step 2: Put this code snippet on your website**
Add the following script to each page:
```
```
Every time a new video gets initialized in the player, you can trigger its interactive layer with the following snippet:
*JS Version:*
```
```
The script acts as a bridge between your player and Spott. To set this up, set these parameters:
- A selector **player** that targets the instance of your video player.
### Step 3: Add the external id on Spott
While you're still in the Studio, click on the **Projects** tab
In this modal, you should see "*External source*" and select "YouTube." In the ExternalID field, you can enter your YouTube ID.
For external ID, this is the ID of your YouTube video. This can be found at the end of your YouTube video URL, highlighted in bold:
```
https://www.youtube.com/watch?v=dQw4w9WgXcE
```
Click save to continue. Now you're all set!
### Multiple YouTube videos on a single page
```
```
```
First video
Second video
```
### Make your YouTube video responsive
To make your YouTube videos with interactivity responsive, you can add the following code:
Make sure the YouTube iframe is wrapped between \