# Custom Captions

Source: https://dev.arcxp.com/video-center/developer-docs/video-center-player-custom-captions/

Video Center Player - Custom Captions

To provide a consistent user-interface and abide by FCC regulations, the Video Center player now provides a custom implementation of closed captions. The default captions style can be set in the `<org>.js` configuration file and native captions can be implemented as well. The end-user can customize the display of their browser’s captions to meet FCC regulations. The following screenshot shows the customization options:

![Subtitle Implementation Screenshot](https://dev.arcxp.com/images/video-center/KB0010151.jpeg)

## Example

The following codeblock shows an example of caption style configurations:

```js
    PoWaSettings.subtitles = PoWaSettings.subtitles ? PoWaSettings.subtitles : {
    // default 'bump' function
    bump: dimensions => `.powa-sub {bottom: ${ dimensions.height }px}`,

    // default
    native: false,

    // default
    subtitleStyle: config => `
        .powa-sub {
            position: absolute;
            bottom: 0;
            width: 100%;

            display: flex;
            flex-direction: column;
            align-items: center;

            pointer-events: none;
            transition: all 0.2s ease-out;

            line-height: 1.2em;
        }

        .powa-sub-torpedo {
            background: ${ config.background || 'rgba(0, 0, 0, 0.25)' };
            color: ${ config.color || 'rgb(240, 248, 255)' };
            font-family: ${ config['font-family'] || 'sans-serif' };
            font-size: ${ config['font-size'] || 'inherit' };
            text-shadow: ${ config['text-shadow'] || 'none' };

            border-radius: 3px;
            padding: 3px;
            margin: 5px;
            text-align: center;
        }`,

};
```

To move captions out of the way of the custom scrubber we apply a CSS rule. The `bump` function defines how the rule is used and returns a CSS rule for `.powa-sub` that moves captions to the desired location. An event object with the `height` and `width` of custom controls is provided to the `bump` function when custom controls are displayed. When custom controls are hidden the CSS rule is removed from the page.

To use native captions set `native: true`. Native captions cannot be moved out of the way of custom controls but _should_ move out of the way of native controls.

The default style of the captions can be set by defining a `subtitleStyle` function. In order to honor user-customized caption settings, the function must support relaying `background`, `color`, `font-family`, `font-size`, and `text-shadow`, from the config object that is passed in.

## Supported fonts

For subtitles, you can choose a font from a pre-defined list in the subtitle settings menu. The Video Center player supports the following fonts:

```json
  monoSans: {
    name: 'Mono Sans',
    rule: "'Andale Mono', 'Lucida Console', monospace"
  },
  monoSerif: {
    name: 'Mono Serif',
    rule: "'Courier New', monospace"
  },
  propSans: {
    name: 'Sans',
    rule: 'sans-serif'
  },
  propSerif: {
    name: 'Serif',
    rule: 'serif'
  },
  comic: {
    name: 'Comic',
    rule: "'Comic Sans MS', Impact, fantasy"
  },
  fancy: {
    name: 'Fancy',
    rule: "'Monotype Corsiva', cursive"
  },
  smallCaps: {
    name: 'Small Caps',
    rule: "'Andale Mono', 'Lucida Console', monospace, sans-serif"
  }
```