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".
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!
Using Spott Video Id
We're currently working on a way to use the Spott VideoId as the reference ID. When this is live, more documentation will be added.
If there are certain things not clear or you might have any questions, don't hesitate to contact us!
Comments
0 comments
Please sign in to leave a comment.