Embedding an HTML5 Player in an HTML iframe
Using a special page from Ooyala, you can embed your player in an iframe.
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? ec=embedcode &pbid=player_branding_id &docUrl=http%3A%2F%2Fexample.com &platform=platform &options[optionname]=value&options[optionname]=value..." frameborder="0" allowfullscreen> </iframe>
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
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
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.
<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? 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>