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

Start by going to the Video page and open the video you are looking for.

Step 2

Click on the Share tab.

Step 3

Underneath Options you will find the visibility of the stream set to 'private', this is the case by default. Change this by clicking the Change to public button.

Step 4

Now a Generate embed code has shown up. Click it to open the embed window.

Step 5

In this new window, you are able to change the settings for your custom player.

  1. You can choose between the embed methods, which is either via Javascript or iframe. Examples and more information about both methods are explained below. 
  2. You can also change your customization options in this window. Afterward, this can be changed in the embed code itself.

Step 6

Click 'Generate' to see a preview of the result and generate the embeddable code. You can now copy this code and paste it on your website or send it to your website developer.

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://discover.spott.ai/react-player/js/embed.js');</script>

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

<div class="spott-video-embed" data-video-id="b94d9ae7-453c-43e6-a342-e73bf85b1957 data-theme="NORMAL" data-primary-color="#ffffff" data-hide-spott-logo="true" data-hide-shop-video="true" data-show-timeline-dots="true" data-poster-frame-type="FIRST_FRAME" data-font-color="#000000" data-auto-play="false" data-tracked-tags="false" data-align-to-video="false" style="width: 500px; max-width: 100%;"></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.

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/content/interactive-videos/read/13a60f73-ad29-4206-b614-490373422987

Your video has to be changed to Public for it to display. 

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='355' src='https://app.spott.ai/api/app/rest/v004/video/videos/b94d9ae7-453c-43e6-a342-e73bf85b1957/embeddedStreamer?templateName=default&theme=NORMAL&primaryColor=%23ffffff&autoplay=false&posterCopy=&fontFamily=&fontColor=%23000000&posterFrameType=FIRST_FRAME&hideShopVideo=true&hideSpottLogo=true&disableEventLog=false&showTimelineDots=true&trackedTags=false&alignToVideo=false&cardsExpanded=false&interactiveInstructions=false&markerStyle=classic&tagPosition=center&showUnavailableProducts=false' frameborder='0' allowfullscreen></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: 13a60f73-ad29-4206-b614-490373422987 

The ID has to be placed in the iframe in the src parameter in the correct place: https://app.spott.ai/api/app/rest/v004/video/videos/{paste it here}/embeddedStreamer... 

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


Did this answer your question?