Based on the chosen playback technology, different methods may be used to style subtitles.

Dash

The following CSS code can be used to style Dash and HLS subtitles.

// Move captions down when controls aren't being shown
.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
    overflow: visible !important;
    transform: translateY(-1.5em);
}

/*The following webkit-media-text-track-display overflow is allow for more padding around Chrome's caption text:*/
video::-webkit-media-text-track-display {
    overflow: visible !important;
    transform: translateY(-1.5em);
}


/*Hide texttrack-settings*/
.vjs-texttrack-settings {
    display: none;
}

/*Styles for chrome and safari captions:*/
/*Chrome uses the video::cue background-color and opacity.*/
video::cue {
    background: none;
    color: #fff;
    text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, black 0.1em 0.1em 0.2em;
    white-space: pre-line;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 0.8em;
}

/*Safari uses -webkit-media-text-track-display-backdrop for it's background colour. Note the !important which overrides Safari's inherent styling.*/
video::-webkit-media-text-track-display-backdrop {
    background-color: black !important;
    overflow: visible !important;
}

/*Overflow visible is important on the following code for Safari and I'm setting the captions below the video with the transform*/
video::-webkit-media-text-track-container {
    overflow: visible !important;
    transform: translateY(30%) !important;
}

Flash (deprecated)

Using Flash, only the font size and colours can be changed. This is done through player options at initialisation time.

var options = {
    'empflash': {
      'swf': './swf/emp-player.swf',
      'fontName': 'default', // timesroman, helvetica, courier, Defaults to 'default'
      'fontColor': '000000',
      'fontBackgroundColor': 'ffffff',
      'fontBackgroundOpacity' : 1.3, // value between 0.0 (transparent) and 2.0 (opaque). Defaults to 1.3
      'fontScaleRatio': 0.015
    }
};