Embedding Basics

Streamable enables its users to embed their uploaded videos on websites, and in this tutorial, we'll walk you through how to do so. The three main ways are via our Embed button, dashboard video player, and video page. 

  Note: Embedded videos are rendered on your site using  
  the Streamable player, and if you'd like to customize
  aspects of the video player, see the Embed Button
  section of this article. 

Embed Button

1. On your dashboard, locate the video you'd like to embed.
2. Click the Embed button on the video to launch our Build Embed Code window.
   
   
   

3. In the Build Embed Code window that should've appeared, you'll have two main options for the type of embed code you can generate: a code that creates a Fixed Size video player and one that creates a Responsive video player. Both options are illustrated below:

~ Responsive Video Player

1. Under the Size category, the default selection for embed codes in our Build Embed Code window is Responsive, which you can leave selected. 
2. Under the Customize section, options for altering the player include the following:
   
   Loop - loops videos after they've started playing
   
   Autoplay - automatically plays a video when a user arrives at the video page
   
   Hide Controls - hides the control menu that's shown when users hover over the video player
3. 
4. If you'd like to have any of the above options to be a part of the player, click the check box next to the name of the feature. 
5. Finally, click the Copy Embed Code button in order to copy your customized embed code. 
   
   
6. In order to use the embed code, simply right-click within your site's HTML editor and click Paste. An alternative way is to use the paste command for your respective device (e.g., Command + V, Control + V).

~Fixed Video Player

1. If you'd like your video player to be a fixed size, select the Fixed Size option under the Size category of the Build Embed Code window. 
   
2. Forms for changing the width and height (in pixels) of the video player should appear, and you can enter your desired measurements. The first form alters the width, and the second form alters the height.
3. Under the Customize section, options for altering the player include the following:
   
   Loop - loops videos after they've started playing
   
   Autoplay - automatically plays a video when a user arrives at the video page
   
   Hide Controls - hides the control menu that's shown when users hover over the video player
   
   
4. If you'd like to have any of the above options to be a part of the video player, click the check box next to the name of the feature.
5. Finally, click the Copy Embed Code button in order to copy your customized embed code.
   
   
6. In order to use the embed code, simply right-click within your site's HTML editor and click Paste. An alternative way is to use the paste command for your respective device (e.g., Command + V, Control + V).

Dashboard Video Player

1. On your dashboard, locate the video you'd like to share.
2. Hover over the video, and a white play button should appear. Click the region that the button appears on, and a video player should emerge.
   
   
3. Right-click the video player, and select the Copy embed code button.
   
   
   
4. In order to use the embed code, simply right-click within your site's HTML editor and click Paste. An alternative way is to use the paste command for your respective device (e.g., Command + V, Control + V).

Video Page

 

1. On your dashboard, locate the video you'd like to share.
2. Click the URL shown underneath the title of your video. You should be taken to its video page.
   
   
3. Right-click the video player, and select the Copy embed code button.
   
   
   
4. In order to use the embed code, simply right-click within your site's HTML editor and click Paste. An alternative way is to use the paste command for your respective device (e.g., Command + V, Control + V).

Questions? Please visit our Support Center at streamableapp.zendesk.com for further assistance!