Signed embed codes are an alternative to our Allowed Domains feature for preventing your videos from being embedded where you do not want them to be. While our Allowed Domains feature is based upon verifying the referrer information sent by the web browser, signed embed codes are based upon verifying a signature appended to your embed code that is generated using a secret signing key. Signed embed codes allow you to set an expiration time for your embed code, so that a particular embed code is only valid for a limited time ensuring that the embed code cannot be reused.
Who should use signed embed codes?
Signed embed codes are meant to be used on sites that generate dynamic HTML content. Therefore, they require some programming knowledge in order to properly sign the embed codes.
A normal, unsigned, SproutVideo embed code normally looks something like this:
<iframe src='http://videos.sproutvideo.com/embed/e898d2b5111be3c860/546cd1548010aaeb?type=hd&autoplay=true' … />
When using signed embed codes the embed code stays essentially the same with the addition of two new parameters appended to the src attribute of the iframe.
It looks something like this:
<iframe src="http://videos.sproutvideo.com/embed/e898d2b5111be3c860/546cd1548010aaeb?type=hd&autoplay=true&signature=00dKyjf05AsJWHD%2FxSU8kA8CFn4%3D&expires=1367525544" ... />
The signature parameter is dynamically generated by your application using your secret signing key, and SproutVideo will not serve the video unless the signature is valid and has not expired.
Enabling Signed Embed Codes
Signed embed codes can be enabled for individual videos by going to that video, checking the ‘Require Embed Codes to Be Signed’ check box, and clicking the ‘Save Changes’ button:
Generating signed embed code URLs
We use a URL signing protocol very similar to the OAUTH1 signing protocol using a Base64-encoded hash generated using the HMAC-SHA1 algorithm.
To start, we must generate the base string that will be used to create the hash. The base string is composed of the following elements:
Request method: The request method in this case will always be
Host name: The host name in this case will always be
Request path: The request path is part of the URL after the host up to the first
? If the URL we are signing is
http://videos.sproutvideo.com/embed/e898d2b5111be3c860/546cd1548010aaeb?type=hd&autoplay=true, the request path is
Sorted query parameters: First, we need to add the expiration parameter to the list of parameters. Typically, you would pick a time a few minutes or so in the future (Note that ideally your system time should be synced using NTP or a similar protocol so your system thinks it is the same time that SproutVideo’s system does). The time you pick should be in UTC. The value should be represented as an integer number of seconds since the Epoch. For example, the time of May 02 2013, 10:21:43 PM (UTC) would be represented as
1367533243. These values need to be encoded into a single string which will be used later on. The process to build the string is very specific:
- Percent encode every key and value that will be signed.
- Sort the list of parameters alphabetically by encoded key.
- For each key/value pair:
- Append the ‘&’ character.
- Append the encoded key to the output string.
- Append the ‘=’ character to the output string.
- Append the encoded value to the output string.
Using the same URL above, the following string will be produced by repeating these steps:
So now that we have all of our components we need to combine them into a single string formatted on multiple lines as seen below:
Request method Host name Request path Sorted query parameters
With our example URL above, the multi-line string would look like this:
GET videos.sproutvideo.com /embed/e898d2b5111be3c860/546cd1548010aaeb &autoplay=true&expires=1367533243&type=hd
Now that we have our string, it’s time to sign it.
Calculating the signature
First you’ll need your API key to sign the string. You can find your API key here. Finally, the signature is calculated by passing the signature base string and signing key to the HMAC-SHA1 hashing algorithm. The details of the algorithm are explained in depth here, but thankfully there are implementations of HMAC-SHA1 available for every popular language. For example, Ruby has the OpenSSL library and PHP has the hash_hmac function.
For example, the output given the example string and a signing key of
"\372\210@wo\356[\335\263\037\222h\230Fo\300\323,|\375". That value, when converted to base64, is the signature for this request: +ohAd2/uW92zH5JomEZvwNMsfP0=`
Building the final request URL
First, take the original url:
http://videos.sproutvideo.com/embed/e898d2b5111be3c860/546cd1548010aaeb?type=hd&autoplay=true. Next add the expires parameter to the end like this
http://videos.sproutvideo.com/embed/e898d2b5111be3c860/546cd1548010aaeb?type=hd&autoplay=true&expires=1367533243 Finally URI encode the signature parameter and add that to the end of the URL like this:
Add this as the
src attribute of your iframe like this:
<iframe src="http://videos.sproutvideo.com/embed/e898d2b5111be3c860/546cd1548010aaeb?type=hd&autoplay=true&expires=1367533243&signature=%2BohAd2%2FuW92zH5JomEZvwNMsfP0%3D" … />
And your video should appear.
Check out these other articles in the Embedding Videos section: