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, upload your video, and make it interactive.
We have a full step-by-step guide 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:
<script src="https://static.spott.ai/videoplayer/js/spott.youtube.js" /></script>
<div id="youtube_player_id_here"></div>
<script>
function onYouTubeIframeAPIReady () {
const player = new YT.Player('youtube_player_id_here', {
videoId: 'youtube_video_id_here',
width: '620px',
events: {
'onReady': loadSpottLayer
}
playerVars: {
'autoplay': 1,
'controls': 1,
'autohide': 0,
'wmode': 'opaque',
'origin': ''
}});
function loadSpottLayer() {
if(!player.spottLoaded){
if (window.initSpottYouTube) {
initSpottYouTube(player, {
videoId: "spott_video_id_here"
});
player.spottLoaded=true;
} else {
setTimeout(loadSpottLayer, 500);
}
}
}
};
</script>
<script src="https://www.youtube.com/iframe_api"></script>
iFrame Version:
<script src="https://static.spott.ai/videoplayer/js/spott.youtube.js" /></script>
<iframe width="560" height="315" id="youtube_player_id_here"
src="https://www.youtube.com/embed/youtube_video_id_here?enablejsapi=1&origin=https://yourwebsite.com"
title="YouTube video example" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<script>
function onYouTubeIframeAPIReady () {
const player = new YT.Player('youtube_player_id_here', {
events: {
'onReady': loadSpottLayer
}
});
function loadSpottLayer() {
if(!player.spottLoaded){
if (window.initSpottYouTube) {
initSpottYouTube(player, {
videoId: "spott_video_id_here"
});
player.spottLoaded=true;
} else {
setTimeout(loadSpottLayer, 500);
}
}
}
};
</script>
<script src="https://www.youtube.com/iframe_api"></script>
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, upload your video, and make it interactive.
We have a full step-by-step guide 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:
<script src="https://static.spott.ai/videoplayer/js/spott.youtube.js"/></script>
<script src="https://www.youtube.com/iframe_api"></script>
Every time a new video gets initialized in the player, you can trigger its interactive layer with the following snippet:
JS Version:
<script src="https://static.spott.ai/videoplayer/js/spott.youtube.js" /></script>
<div id="youtube_player_id_here"></div>
<script>
function onYouTubeIframeAPIReady () {
const player = new YT.Player('youtube_player_id_here', {
videoId: 'youtube_video_id_here',
width: '620px',
events: {
'onReady': loadSpottLayer
}
playerVars: {
'autoplay': 1,
'controls': 1,
'autohide': 0,
'wmode': 'opaque',
'origin': ''
}});
function loadSpottLayer() {
if(!player.spottLoaded){
if (window.initSpottYouTube) {
initSpottYouTube(player, {});
player.spottLoaded=true;
} else {
setTimeout(loadSpottLayer, 500);
}
}
}
};
</script>
<script src="https://www.youtube.com/iframe_api"></script>
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
<script src="https://static.spott.ai/videoplayer/js/spott.youtube.js" /></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var spottLoaded = false;
// VIDEO 1
const player1 = new YT.Player('youtube_player_id_1_here', {
events: {
'onReady': loadSpottPlayer
}
});
// VIDEO 2
const player2 = new YT.Player('youtube_player_id_2_here', {
events: {
'onReady': loadSpottPlayer
}
});
function loadSpottPlayer() {
if(!spottLoaded){
if (window.initSpottYouTube) {
initSpottYouTube(player1, {
videoId: "spott_id_1"
});
initSpottYouTube(player2, {
videoId: "spott_id_2"
});
spottLoaded=true;
} else {
setTimeout(loadSpottLayer, 500);
}
}
}
}
</script>
<h2>First video</h2>
<div class="video-container">
<iframe id="youtube_player_id_1_here" frameborder="0" allowfullscreen="1" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
sandbox="allow-scripts allow-same-origin allow-presentation"
title="First video title" width="630" height="360"
src="https://www.youtube.com/embed/youtube_video_id_1_here?enablejsapi=1"></iframe>
</div>
<h2>Second video</h2>
<div class="video-container">
<iframe id="youtube_player_id_2_here" frameborder="0" allowfullscreen="1" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
sandbox="allow-scripts allow-same-origin allow-presentation"
title="Second video title" width="630" height="360"
src="https://www.youtube.com/embed/youtube_video_id_2_here?enablejsapi=1">
</iframe>
</div>
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 <div class="video-container" ...>
<style>
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container > div {
position:unset!important;
}
.video-containeriframe, .video-containerobject, .video-containerembed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<style>