Embedding Player V4 in an HTML iframe

You can use the HTML <iframe> ("inline frame") tag to embed content in a separately defined "container" of a web page. You can embed Player V4 in an <iframe>.
Note: Wherever you see url_where_hosted in sample code, replace this (in your code) with the URL that points to where the resource is hosted. The URL can point to a location on the same host (internal link) or on a separate host (prefixed with http:// or https://). If you host resources yourself, be sure to check for any path dependencies within the files.

Player v4 iframe.html file

Ooyala provides a basic sample <iframe> page (iframe.html) that shows an example of using the basic player and skin in an <iframe>. It takes the values you specify in the <iframe> attributes and invokes the Ooyala Player in the inline frame. For the default location of this file, see Hosting Player V4 Resources.
Note: You should not use this example out-of-the-box. Instead, customize the example with plugins you host and specify additional parameters.

Example Player V4 Embedding for an iframe

The following example shows how you can embed the player in an iframe on a web page.
Note: The following example has been formatted for readability. In actual use, everything should be on a single line.
<iframe width="480" height="320" src="url_where_hosted/iframe.html?
  ec=YOUR_ASSET_ID
  &pbid=YOUR_PLAYER_ID
  &pcode=YOUR_PCODE     
  &options[optionname]=value&options[optionname]=value..."
  frameborder="0" allowfullscreen>
</iframe>  

Explanation of <iframe> attributes

  • width and height: 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, and docUrl (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.
For more information about ec, pbid, and pcode, see Basic Embedding Information.

Player Parameters for <iframe>

Parameter Description of Value Required?
ec or embedCode The asset ID for the desired video. An asset ID is the same as a ContentID (in the Backlot UI) and an embed_code (in the Player V4 JavaScript API). Yes
pbid A "player branding ID" (or simply "player ID") for a player you have defined in Ooyala Backlot. Yes
pcode Your pcode, which is the alphanumeric string that precedes the period in your API key. Yes
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 on the URL on which the player is placed). No
options Standard Ooyala player run-time 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. No

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="url_where_hosted/iframe.html?
  ec=YOUR_ASSET_ID
  &pbid=YOUR_PLAYER_ID
  &pcode=YOUR_PCODE  
  &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) tagUrl and other parameters are specified in the &options attribute for the iframe. When using this tag in your iframe, note that the iframe must be URL encoded.

<iframe width="480" height= "320" src= "url_where_hosted/iframe.html?
  ec=YOUR_ASSET_ID
  &pbid=YOUR_PLAYER_ID
  &pcode=YOUR_PCODE 
  &options[autoplay]=false
  &options[google-ima-ads-manager.all_ads]=[{%22tag_url%22:%22someUrlThatIsUrlEncoded%22,
  %22position_type%22:%22t%22,
  %22position%22:%220%22}]">
</iframe>

Was this article helpful?