Embedding an HTML5 Player V3 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 frame.

The lines below have been broken for readability; in actual use, be sure to put this all on a single line.
<iframe width="480" height="320" src="http://player.ooyala.com/iframe.html?
ec=embedcode
&pbid=player_branding_id
&docUrl=http%3A%2F%2Fexample.com
&platform=platform
&options[optionname]=value&options[optionname]=value..."
frameborder="0" allowfullscreen>
</iframe>  
Explanation 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 below).
  • 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 html5-fallback
    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 URL.

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 URLs.

<iframe width="480" height="320" src="http://player.ooyala.com/iframe.html?
ec=embedcode
&pbid=player_branding_id
&platform=platform
&options[autoplay]=true&options[initialTime]=122"
frameborder="0" allowfullscreen>
</iframe>       
   

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?
ec=embedcode
&pbid=player_branding_id
&platform=platform
&options[google-ima-ads-manager.adTagUrl]=someUrlThatIsURLencoded
&options[google-ima-ads-manager.additionalAdTagParameters.cust_params]=env%3Dmobilevcmshost%26siteview%3D1%26pth%3Djsbin.com
&options[google-ima-ads-manager.additionalAdTagParameters.vid]=547632
</iframe>