CSS Code for video subtitles

Hi folks

I’m trying to add subtitles to a video but the I want the subtitles underneath the video instead of the screen blocking some of content. I’ve found some CSS code to do this but I’m struggling to work out where to put the code. I got the code from here:

https://foliovision.com/player/faq-intro/css-tips-and-fixes#fullscreen-font-size

I know it’s normally in the customise section in the CSS part but I tried pasting it into the box and then updating it/saving it and nothing happened. So I’m not sure if it’s the code not working or i’m putting it in the wrong place.

It’s a vimeo video so does it need to go somewhere into vimeo instead?

Thanks for your help x

P.S. Here’s the code:

.flowplayer:not(.is-fullscreen) {
margin-bottom: 5.2em !important;
overflow: visible;
}
.flowplayer:not(.is-fullscreen) .fp-caption {
bottom: -46px !important;
background-color: #000;
display: block;
}
@media only screen and (max-width: 39.9375em)
.flowplayer:not(.is-fullscreen) .fp-caption{
bottom: -40px !important;
}
}
@media only screen and (max-width: 29.9375em) {
.flowplayer:not(.is-fullscreen) .fp-caption{
bottom: -36px !important;
}
}

• This topic was modified 1 year, 7 months ago by Steven Stern (sterndata).