Resizing a Video Player Using the Player API

 You can resize your video player using the Player API, which gives you dynamic control of the sizing not available via the publishing code or BEML. 

If you are new to the Player API, you should read Player API Overview before proceeding.

Every component and layout container in a player has a setSize(width,height) method. When you resize an element, other surrounding elements will be resized automatically to adjust to the new arrangement if their widths and heights are not set explicitly in the BEML code for the template. If other elements are sized explicitly in the BEML code, they will be pushed horizontally or vertically to accommodate the resized element, and they may become partly or fully hidden.

In the standard video player with horizontal list below, the Player API is used to adjust the aspect ratio for a mix of 4:3 and 16:9 videos. The height is held constant, while the width is adjusted to standard or widescreen for each new video that is loaded into the player. In this case the overall ExperienceModule is resized so that the list resizes with the video player.

Note that you cannot size overall player (what corresponds to the height and width params in the publishing code) via the Player API because this is part of the HTML DOM rather than the player. You can resize the player via the DOM, however, and then size components within the Player via the API.

The Player API code for this example is shown below.

// namespace for all the global vars
var BCL = {};
function onTemplateLoaded(id) {
  BCL.player = brightcove.getExperience(id);
  BCL.experienceModule = BCL.player.getModule(APIModules.EXPERIENCE);
  // set the overall player width in the DOM -- 405px works for widescreen here
  document.getElementById("myExperience").style.width = "405px";
  BCL.experienceModule.addEventListener(BCExperienceEvent.TEMPLATE_READY, BCL.onTemplateReady);
  // store the original width standardWidth
  BCL.standardWidth = BCL.experienceModule.getWidth();
  // by trial and error, found that 405 width works for widescreen
  BCL.wideScreenWidth = 405;
  // store the height so we don't have to keep fetching it
  BCL.playerHeight = BCL.experienceModule.getHeight();
}
BCL.onTemplateReady = function(event) {
	BCL.videoPlayer = BCL.player.getModule(APIModules.VIDEO_PLAYER);
	BCL.videoPlayer.addEventListener(BCMediaEvent.CHANGE, BCL.onMediaChange);
	// execute the handler for initial video
	BCL.onMediaChange(null);
}
BCL.onMediaChange = function(event) {
	var aspectRatio;
	var currentRendition = BCL.videoPlayer.getCurrentRendition();
	aspectRatio = currentRendition.frameWidth / currentRendition.frameHeight;
	if (aspectRatio > 1.75) {
		// use wideScreenWidth
		BCL.experienceModule.setSize(BCL.wideScreenWidth, BCL.playerHeight);
	}
	else {
		// use standardWidth
		BCL.experienceModule.setSize(BCL.standardWidth, BCL.playerHeight);
	}
}