Player Configuration Guide

Introduction

This article details the configuration settings and features for the Streamable embedded player. These settings determine how the embedded player is rendered and how the configured video is played back by the end-user. 

Here is an example embed code for a Streamable video with tracking enabled:

<iframe src="https://streamable.com/s/ru3ya/iqoguo" width="640" height="360" frameborder="0" allowfullscreen></iframe>

The preferred format for embedding a Streamable video is within a secure iFrame. This way the publisher CMS does not modify or disallow the CSS/Javascript within the video in any way, and ensures bad ads cannot escape the player.



Basic Configuration

Here are the basic settings that are commonly included in an embed code.

  Setting   Type   Description
  shortcode   string   unique ID for video (required)
  embedid   string   unique ID for embed (optional)
  height   integer   height of iFrame in px (optional)
  width   integer   width of iFrame in px (optional)
  mute   boolean   mute video (defaults to false)
  autoplay   boolean   autoplay (defaults to false)


These settings are suitable for most integrations and common CMS platforms. For example, here is a responsive embed code for a Streamable video with autoplay, muting, and tracking enabled:

<div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;"><iframe src="https://streamable.com/s/ru3ya/ibbdzc?autoplay=1&muted=1" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>




Custom Configuration

Here are some advanced settings that can be used for larger publishers and enterprise implementations. In order to use these settings, please contact us.

  Setting   Type   Description
  looping   boolean   loop video (defaults to true)
  branding   string   url of logo or brand img (optional)
  video source   string   url of video src (optional)
  poster source   string   url of thumbnail src (optional)
  source height   integer   height of source video in px
  source width   integer   width of source video in px


With these settings, the player can be used with an existing video infrastructure and CDN offering without utilizing hosting and streaming from Streamable. For example, here is an embed code for an externally hosted video using the Streamable player:

<iframe src="https://streamable.com/customplayer/xnuzaf?src=%2F%2Fcdn-e2.streamable.com%2Fvideo%2Fmp4%2Fhn8hq.mp4%3Ftoken%3D1495816819_1ee05a5e5e8f730d20d57860c6a7d46748026f09&height=720&width=1280&poster=%2F%2Fcdn-e2.streamable.com%2Fimage%2Fhn8hq_first.jpg%3Ftoken%3D1495816819_5c90801217c4e67849189ec90e6ed52b8fe4a0c7" width="1280" height="720" frameborder="0" allowfullscreen></iframe>




Advertising

The following options set the advertising schedule and playback for the Streamable embedded player. If you would like to enable video advertising, please contact us.

  Setting   Type   Description
  type   string   set preroll or postroll ad schedule
  timeout   integer   timeout for ad request in millisec
  skipdelay   integer   time before user can skip in sec
  tag   string   url of VAST/VPAID tag


Using these settings, the Streamable player can be configured to play a wide variety of supported video ads. For example, here is an embed code for a Streamable video with a preroll and a 15-second skip delay player:

<iframe src="https://streamable.com/customplayer/uxmxba?src=%2F%2Fcdn-e2.streamable.com%2Fvideo%2Fmp4%2Fhn8hq.mp4%3Ftoken%3D1495816819_1ee05a5e5e8f730d20d57860c6a7d46748026f09&height=720&width=1280&poster=%2F%2Fcdn-e2.streamable.com%2Fimage%2Fhn8hq_first.jpg%3Ftoken%3D1495816819_5c90801217c4e67849189ec90e6ed52b8fe4a0c7&tag=https%3A%2F%2Fs3.amazonaws.com%2Fstreamable-vast%2Fvast2.xml&type=preroll&skipdelay=15&timeout=2000" width="1280" height="720" frameborder="0" allowfullscreen></iframe>



Please contact us if you have any questions regarding player configuration.

Status Privacy Terms Contact Us