Example of subs styling

video-tracks.scss

/* Example of captions styling for FF and Chrome. 
 * Warning ! Only my prod build includes postcss/autoprefixer work. 
 * this example needs prefixes 
 */

@import '../_variables.scss';
@import '../_media-queries.scss';

$track-font-family: $primary-font, sans-serif;
$track-color: yellow;
$track-background-color: rgba(0, 0, 0, 0);
$track-text-shadow: 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000;
$track-padding-bottom: 80px;

@mixin trackFontDisplay {
    font-size: 2vw;
    font-family: $track-font-family;
    text-align: center;
    @include media-breakpoint-between(xs, sm) {
        font-size: 4vw;
    }
    @include media-breakpoint-up(sm) {
        font-size: 2.8vw;
    }
    @include media-breakpoint-up(lg) {
        font-size: 2.4vw;
    }

    @include media-breakpoint-up(xl) {
        font-size: 1.6vw;
    }
}

video {
    &::cue {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;

        display: inline-block;
        pointer-events: none;
        background-color: $track-background-color;
        color: $track-color;
        line-height: normal;
        white-space: pre-wrap;
        //transform: translateY(-200px);
        text-shadow: $track-text-shadow;
        padding-bottom: $track-padding-bottom;

        @include trackFontDisplay;
    }

    &::cue(:future) {
        color: gray;
    }

    &::-webkit-media-text-track-container {
        position: relative;

        overflow: visible !important;
        // -webkit-transform: translateY(40%) !important;
        // max-height: calc(100% - #{$track-padding-bottom});
        transform: translateY(-#{$track-padding-bottom + 10px}) !important;
        //transform: translateY(-5vh) !important;

        // overflow: hidden;
        text-align: center;
        color: $track-color;
        text-shadow: $track-text-shadow;
        letter-spacing: normal;
        word-spacing: normal;
        text-transform: unset;

        text-indent: 0;
        text-decoration: none;
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
        user-select: none;
        line-height: normal;
        word-break: break-word;
    }

    &::-webkit-media-text-track-display {
        overflow: hidden;
        white-space: pre-wrap;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        transform: none;

        /* Ensure captions aren't cropped when the pseudo element's width cannot accommodate all the text */
        min-width: -webkit-min-content;
        @include trackFontDisplay;
    }
}