Embedding an HTML5 Player in an HTML iframe

Using a special page from Ooyala, you can embed your player in an iframe.

With the HTML <iframe> ("inline frame") tag, you can embed content in
a separately defined "container" of a web page. Detailed here is how you can embed the Ooyala
player in an <iframe>.

To use this feature, you should already have
created a web page and should know where you want to embed the "iframed" player.

Ooyala HTML for iframe

Examine the following HTML. You should put this in your web
page where you want the player to appear.

This iframe.html page provided by
Ooyala does all the work of embedding your player in the iframe. It takes the values you specify
in the <iframe> attributes and invokes the Ooyala Player in the inline

The lines below have been broken for readability; in actual use, be sure to put this
all on a single

<iframe width="480" height="320" src="http://player.ooyala.com/iframe.html?
frameborder="0" allowfullscreen>

of the <iframe> attributes:

  • Width and height: You can modify these as desired to fit your web page, although the values
    shown are optimal.
  • The value for src: Leave this as is, except for the protocol
    (http or https) and the values for ec,
    pbid, docUrl, and platform (detailed
  • Depending on the security of the web page where you will put this iframe, set the protocol
    to either http or https. Insecure iframes (served by
    http) in a secure web page (served by https) cause alarming
    error messages about security mismatches in a user's browser.
    Parameter Description of Value
    ec or embedCode The Ooyala embed code (asset or content ID) for the desired video.
    pbid A "player branding ID" (or simply "player ID") for a player you have defined in
    Ooyala Backlot.
    docUrl This parameter can be used to specify the analytics URL of a video (must be URL
    encoded). This causes analytics events for the video to be grouped under the URL specified
    rather than the URL the player is placed on.
    platform Any of the defined values for the platform parameter detailed at
    http://support.ooyala.com/developers/documentation/api/player_v3_api_qparams.html, such as flash or
    options Standard Ooyala player runtime options, described in the next section. The
    optionames of nested passthrough parameters (for instance, ad
    manager parameters) are in dotted notation of the form
    parameter.subparameter, like
    ad-manager.url. Values must be URL-encoded.

Passing Embedded Parameters to the Player in an <iframe>

Standard Ooyala Player
syntax allows you to specify certain runtime arguments as the third argument on the player
invocation, such as autoplay:true, initialTime:122, and other
options detailed at Embedded Parameters.

With Ooyala's
<iframe> you can pass the same embedded parameters with the
&options= attribute. You can repeat the &options
attribute and values as many times as you like. The only limit is the maximum length of a

Following the syntax in the code sample above, the &options=
attributes look like the following. Be sure to URL-encode values that require it, such as

<iframe width="480" height="320" src="http://player.ooyala.com/iframe.html?
frameborder="0" allowfullscreen>

Example: Passing Google IMA Ad Tags

In the example below, the embedded parameters to set the Google Interactive Media Ads (IMA)
adTagUrl and other parameters are specified in the
&options attribute for the iframe.

<iframe width="480" height="320" src="http://player.ooyala.com/iframe.html?