After uploading and tagging your video, it is now time to share it. 

In this article, you will learn how to embed your video step by step and put it on your website with Javascript or iframes. 

Generating an embed code video step by step

This short step by step instructions assumes that you have already uploaded a video and tagged it.

Step 1

Starting from the homepage, click on a video that you want to embed on your website.

Step 2

Click "Share" in the top right corner of the tagger.

Step 3

Now the embed modal should be right in front of you. Here you can customize parts of the video player, preview the result and generate an embed code that you can put on your website.

  1. In the settings pane on the left side of the modal, you can find all available settings. You can also change the options to embed using Javascript or an iframe. Examples and more information about both methods are explained below.
  2. A change of settings on the left will change the update the live preview on the right. You can see the final result here.
  3. At the bottom right, you can see the embed code. You can copy this code and paste it on your website yourself or send it to your website developer.

If you run into any issues, feel free to reach out to Spott. We're happy to help!

Embed using JavaScript

Embedding in Javascript and iframes are similar, both have the same options of customization. One advantage of using Javascript over iframes is that Javascript is much more adaptable in size to your web page. 

Previously shown in this article, you learned how to generate an embed code. If you want to do it manually, you can use this code as a starting point:

Paste this snippet in the head of your HTML page.

<script> (function(s,p,o,t,T){ T=p.getElementsByTagName('head')[0]; t=p.createElement('script');t.async=1;t.src=o; T.appendChild(t); })(window,document,'https://static-cdn.spott.ai/embed/embed.js'); </script>

Paste this in your HTML code in the place where you want to video to be shown.

<div class="spott-embed" data-spott-id="05251afc-ca1d-4d83-8093-47a513980da2" data-hide-circles="false" data-circle-color="#ffffff" data-custom-circle-class="" data-reveal-type="static" data-language="en"></div>

Note: the data-video-id parameter has been changed for this example.

You can customize your player by providing or editing parameters in the div element with class "spott-embed".

To change the video, switch the data-video-id  to the unique ID of your video. This unique ID can be found in the URL while you are editing it in Spott, which will look like this: https://app.spott.ai/tagger/image/05251afc-ca1d-4d83-8093-47a513980da2

Embed using iframes

Spott provides an interactive video player like the one in the example above. 

Previously shown in this article, you learned how to generate a video embed code. If you want to do this manually, it will look similar to this:

<iframe width='560' height='600' src='https://static-cdn.spott.ai/embed/?spottId=05251afc-ca1d-4d83-8093-47a513980da2&hideCircles=false&circleColor=%23ffffff&language=en' frameborder='0' allowfullscreen scrolling='no'></iframe>

You can change the video by switching the unique ID to your interactive video. This unique ID can be found in the URL while you are editing it in Spott, which will look like this: 05251afc-ca1d-4d83-8093-47a513980da2 .

The ID has to be placed in the iframe in the src parameter in the correct place: https://static-cdn.spott.ai/embed/?spottId={Paste here}&hide...

To further customize the video player to your needs, you can learn more about that in this article.


Did this answer your question?