Add an interactive layer on a Youtube video

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

<!-- load our library -->
<script src="https://static-cdn.spott.ai/videoplayer/js/spott.youtube.js" /></script>

<iframe id="iframe_player" width="1000" height="515" src="https://www.youtube.com/embed/MuajFTgkoHw?enablejsapi=1&modestbranding=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script>
  function onYouTubeIframeAPIReady () {
    const player = new YT.Player('iframe_player');
    initSpottYouTube(player, {
      videoId: "" 
    });
  };
</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 which targets the instance of your video player.
• videoId is the video in the Spott ID of the video currently initialized, which we'll show you how to get in the next step.

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

 

Integration with the Youtube Player

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 media 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 where you want Spott's layer to appear over a Youtube video:

<script src="https://static-cdn.spott.ai/videoplayer/js/spott.youtube.js"/></script>

Every time a new video gets initialized in the player, you can trigger its interactive layer with the following snippet:

<iframe id="iframe_player" width="800" height="600" 
src="https://www.youtube.com/embed/dQw4w9WgXcE?enablejsapi=1&modestbranding=1" 
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script src="https://www.youtube.com/iframe_api"></script> //replace the url by your own youtube ID

<!-- load our library -->
<script src="https://static-cdn.spott.ai/videoplayer/js/spott.youtube.js" /></script>

<script> 
function onYouTubeIframeAPIReady () { 
const player = new YT.Player('iframe_player'); //selector of your Youtube player 
initSpottYouTube(player, {}); 
}; 
</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.
• In the iframe tag, 

Step 3: Add the external id on Spott

While you're still in the Studio, click the dropdown menu at the top of your screen. Click "Edit" to open a new modal.

 

 

In this modal, you should see "External source" and next to it another dropdown menu. Choose "Youtube".