Resizing a Video Player By Modifying the Publishing Code

You can adjust the size of a video player by changing the values of parameters in the publishing code.

Note: for the player to resize gracefully, the player components, especially the Video Player, need to be sized relatively, so that they expand or contract to fill the available space. If you are using a built-in Video Cloud Template, make sure the description includes the word "resizable" or "scalable." Most of the built-in templates are scalable.

The publishing code for Brightcove Players contains <param> tags that specify the height and width of the overall player.

<object id="myExperience" class="BrightcoveExperience">
  <param name="bgcolor" value="#FFFFFF" />
  <param name="width" value="300" />
  <param name="height" value="340" />
  <param name="playerID" value="1195832122001" />
  <param name="playerKey" value="AQ~~,AAAADXdqFgE~,aEKmio9UXaiJFJ4b-xo9Xb6UFi1hKUMR" />
  <param name="isVid" value="true" />
  <param name="isUI" value="true" />
  <param name="dynamicStreaming" value="true" />  
</object>

Here is the player that corresponds to that code.

Now, here is the same player with the value of the width param changed to "405" to eliminate the letter-boxing of the 16:9 videos.

<param name="width" value="405" />
<param name="height" value="340" />

The exact height and width values you need will depend on what you are trying to do, as well as the sizing of other components in the player, such as lists and images. Some trial and error may be required to get the appearance you want.

Also note that the way you set the param values differs slightly depending on which version of the publishing code you are using. The example shown above uses the JavaScript Publishing Code.

If you are using the ActionScript publishing code instead (to embed your player in a Flash container), you will need to modify the following code, which is found in the init() function:

originalConfig.width = 300;
originalConfig.height = 340;

If you are using the HTML to Embed code to embed the player in a blog or some other environment that does not allow JavaScript includes, you will find that width and height attributes appear twice in the code, first near the beginning in an <object> tag (<object id="flashObj" width="300" height="340"...). They appear again in the <embed>: tag that appears later in the code: ...<embed src="http://c.brightcove.com/services/viewer/federated_f9?isVid=1&isUI=1" bgcolor="#FFFFFF" flashVars="playerID=1195832122001&playerKey=AQ~~,AAAADXdqFgE~,aEKmio9UXaiJFJ4b-xo9Xb6UFi1hKUMR&domain=embed&dynamicStreaming=true" base="http://admin.brightcove.com" name="flashObj" width="300" height="340"... It is this second set of attributes that you need to modify to change the size of the player. So the following code will create a player that looks like the resized example above.

Video Cloud

App Cloud

Resources

Resizing a Video Player By Modifying the Publishing Code

Company

Support

Developer