Embedding Videos

Display videos on your website. Set the placement of user drawings and comments along with videos to enhance communication and the learning experience.


If you're signed in, the following examples will show your api_key in the request paths. Otherwise, they'll show a generic user and video IDs in the examples.

You are currently not signed in. The following sample shows embedding for a video with ID OOOOOOOO and api_key of XXXXXXXXXXXXXXXX

Basic embed code for video ID: OOOOOOOO

<script type="text/javascript" id="vidprep_loader">
  // configure options here
  var VIDPREP_OPTIONS = { api_key: 'XXXXXXXXXXXXXXXX', video_id: 'OOOOOOOO' };

(function() {
  var n = document.createElement('script'); n.type = 'text/javascript'; n.id = "vidprep_script";
  n.src = 'http://vidprep.com/assets/loader.js?v=' + Math.round(new Date().getTime()/3600000);
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(n, s.nextSibling);
})();
</script>

(Optional) Control the placement and style of video and comments

Add these HTML tags wherever you want on your page. Feel free to add additional CSS classes or styles as needed.
<!-- video will appear here -->
<div class="vidprep_video" data-id="OOOOOOOO"></div>

<!-- comments will appear here -->
<div class="vidprep_sidebar" data-video_id="OOOOOOOO"></div>

(Optional) Add user names (and images) to comments and drawings

Change this line, replacing the appropriate user values with data from the user that is logged in on your website:
// configure options here
var VIDPREP_OPTIONS = {
  api_key: 'XXXXXXXXXXXXXXXX',
  user_id: 'USER_ID_ON_YOUR_WEBSITE',
  user_name: 'USER_NAME_ON_YOUR_WEBSITE',
  user_image: 'URL_OF_USER_IMAGE'
};

Heads up! Please ensure all values in quotes are properly escaped in Javascript using backslashes.

For example if a user has a name of Conan O'Brien, the correct line would be:
user_name: 'Conan O\'Brien' 

(Optional) Create a separate discussion

Change this line, using any DISCUSSION_ID you want to uniquely identify this discussion:
// configure options here
var VIDPREP_OPTIONS = {
  api_key: 'XXXXXXXXXXXXXXXX',
  discussion_id: 'DISCUSSION_ID'
};

(Optional) Additional features

Please contact us if you need additional features, such as:
  • Hashed signatures instead of api_keys for advanced security
  • Local JavaScript callbacks after videos or comments have loaded
  • Resumable uploader for large video files
  • Ability to modify the CSS of videos and comments