Resizing a Video Player Using BEML

Using BEML (the Brightcove Experience Markup Language), you can size the video player and any other component. You must have a Professional or Enterprise account to use BEML. If you are new to creating templates with BEML, you should read Customizing Players with BEML before proceeding.

To modify a standard Video Cloud player template, you will need to duplicate the template and edit the copy to access the BEML code. You can also create a new template and construct a whole new player template using BEML.

Every visual element of a BEML template has height and width parameters. To size the video player component, set values for these parameters in the VideoPlayer, ChromelessVideoPlayer, or VideoDisplay tag, depending on which is used.

<Runtime>
  <Theme name="Deluxe" style="Light"/>
  <Layout id="application" boxType="vbox" gutter="5" width="405" height="340">
    <VideoPlayer id="videoPlayer" width="405" height="280" video="{videoList.selectedItem}"/>
    <TileList id="videoList" automaticAdvance="true" height="60" columnWidth="80" rowHeight="60" columnGutter="3" buttonSize="26">
      <ListItem showBack="false">
        <ThumbnailButton imageInset="3" data="{currentItem}" source="{currentItem.thumbnailURL}"/>
      </ListItem>
    </TileList>
  </Layout>
</Runtime>

Here is the player created from the BEML code above.

If you are sizing the player to match the aspect ratio of your content (usually 4:3 or 16:9) then the aspect ratio of the ChromelessVideoPlayer or VideoDisplay component should be the same as that of the videos. For the VideoPlayer component, you will need to add additional pixels to the height for the media controls.