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. For a list of Ooyala-hosted paths, see Ooyala-hosted Player V4 Resources. 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 (see Hosting Player V4 Resources), 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 Ooyala-hosted 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     
  &optional_parameter_1=value
  &optional_parameter_2=value
  &optional_parameter_N=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

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 as part of the query. You simply preface each parameter name with an ampersand (&). You can add attributes and values as many times as you like. The only limit is the maximum length of a URL.

The following code example shows how to include the autoplay and initialTime parameters as part of the query. 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  
  &autoplay=true
  &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 query for the iframe (see Google IMA Ad Parameters). 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 
  &autoplay=true
  &google-ima-ads-manager.all_ads={%22tag_url%22:%22someUrlThatIsUrlEncoded%22,
  %22position_type%22:%22t%22,
  %22position%22:%220%22}">
</iframe>  

해당 내용이 도움 되었습니까?