[SPOTT] Vimeo video player

If you are working with Vimeo on your website, you can easily add Spott's interactive layer by adding a script to your existing implementation.

You'll be able to control the visibility and appearance of the interactive layer per video from the video details in Spott. Your current video publishing process is not affected, which means you publish your videos first and add the interactive layer independently.

There are two ways you can easily set up the Spott interactive overlay on Vimeo.

1. Using the Spott Video ID (Easiest)
2. Using an external ID and link it internally in Spott (Advanced)

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

<!-- Import Vimeo script -->
<script src="https://player.vimeo.com/api/player.js"></script>

<!-- Spott script -->
<script src="https://static.spott.ai/videoplayer/js/spott.vimeo.js"/></script>
 
<div id="js-video"></div>
<script>
  //setting up your Vimeo player
  const player = new window.Vimeo.Player('js-video', {
    id: '', // your Vimeo video id
    width: 640
  });

  initSpottVimeo(player, {
    videoId: '' //your Spott video ID
  });
</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 Vimeo video should now have an interactive layer!

2. Using an External ID

Use an External ID if you are looking for a more advanced but scaleable integration. Using the External ID will allow you to have to put in the code snippet on your website once. We only advise you to set up this implementation if you are a developer yourself or have one in your team.

If this is not you, it might be easier to use the first solution by using the Spott Video ID.

For Content Creators

Before you start these steps, make sure you've uploaded your video to the Vimeo platform. Take note of the video id.

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 and make it interactive.

If you don't know how to do this, see this step-by-step guide on how to do this.

Step 2: Set an external source

While you're still in the Studio, go to the publish tab and enter the Vimeo ID in the External id field and select Vimeo as External source:

Step 3: Enter your external ID and save

<script src="https://static.spott.ai/videoplayer/js/spott.vimeo.js"/></script>

<script>
  initSpottVimeo(player, {
    vimeoVideoId: '' //your Spott external reference
  });
</script>