YouTube

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.

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:

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

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