-
I am using .vtt subtitles on our videos and I need to control the font size and colour etc with CSS.
I have searched the Foliovision website and cannot find:a. The correct coding for the CSS
b. The correct location for the CSSPlease advise
-
-
Hello Gillian,
The basic subtitles properties can be adjusted in wp-admin -> FV Player -> Settings -> Skin -> Subtitles: https://foliovision.com/player/getting-started/customizing-fv-player-skin#subtitles-skin
If you need more customization, please check the “Subtitles” section here: https://foliovision.com/player/faq-intro/css-tips-and-fixes
The introduction on that page gives you tips on where to put in the CSS.
Please let me know if anything does not seem to work.
Thanks,
Martin
Thanks Martin,
I tried putting the CSS in the Skin section of Settings./* Flowplayer subtitles */ .flowplayer .fp-captions p { color: #fe8600 !important; font-style: italic !important; }That didn’t work (.fp-captions p { ) so I tried :
/* Flowplayer subtitles */ .flowplayer .fp-captions .skin { color: #fe8600 !important; font-style: italic !important; }This is a brief example of a .vtt subtitle:
00:00:47.399 --> 00:00:49.000 <c.live>Max ! Max !</c>I also tried similar experiments in the Theme (Twenty Twenty Five) Custom CSS, but that didn’t work.
I cleared the Stream Loader Cache and CloudFront (Invalidation) as the Subtitles are on Amazon.
(I since read that you recommend subtitles should be on the WordPress site, so I will move them if that will help.).
TYPO in the above!
.fp-captions .skin – should read: .fp-captions .live (which is the subtitle CSS selector.
My apologies.
Hello Gillian,
It does not matter where the subtitles are stored and you don’t have to purge any cache related to the subtitles or videos, like FV Player Pro Stream Loader or CloudFront.
If you do use some CSS optimization which does cache the optimized CSS, the that should be purged. It seems that you use the Siteground Optimizer, so I would recommend you to disable it while you work on the CSS and then make sure you purge its cache when you enable it again.
.flowplayer .fp-captions pshould really work if you put in!important, which shouldn’t be necessary if you put in into our “Custom CSS” settings box as it comes after the default FV Player CSS code.I checked the “Online Sheepdog Training Videos – Preview!” video on your website and I see the VTT subtitles come with HTML tags like
<i>and<font>:WEBVTT 00:00:00.320 --> 00:00:01.639 <i><font color="#fe8600">Away.</i></font> 00:00:01.840 --> 00:00:03.640 <i><font color="#fe8600">Away [whistle command]</i></font>Are you trying to remove all that styling added by the HTML in your VTT files?
Or is there really HTML like
<c class="live">for which you would simply like to add italics? Please check if that HTML is really added for the subtitles when playing the video or send us a link where we can see it.Thanks,
Martin
Hello Martin,
I understand that “font color” (as you correctly noticed on our “Preview” video should not be used.
ChatGPT suggested they should be styled using <c> tags. So this is where <c.class=”live”> comes in. I have been testing with a view to changing all our subtitle formats.
The “live” selector means the speech is live (me talking to the camera in the field) and I have put a “narr” selector for narrated commentary, which I add later.
Because it’s the same voice, all the time, I feel it’s better the have the subtitles in different colours.
I tried the recommendations in the attached image, with no success, so I wanted to check with you to see if whether ChatGPT’s recommendations are correct.
Many thanks for your help so far.
Hello Gillian,
Could you please send over your actual VTT file? I would like to check how does it really show in our player.
I checked w3.org and I see
<c.yellow>should indeed work for text color: https://www.w3.org/TR/webvtt1/#default-text-colorThanks,
Martin
Hello Martin,
The .vtt file would not upload here, so I have emailed it to you.
Thanks,
Andy
Hello Andy,
Thank you, I got the file. It seems to me if you are using the
<c>tag, you should be using it with a color value directly and not something like “live” or “narr”.The full list of available colors is here: https://www.w3.org/TR/webvtt1/#default-text-color
We will check if we could add support for this. I wonder if it’s supported by native HTML5 video playback on iOS for instance.
Thanks,
Martin
Hello again, Martin,
Thank you for looking at this.
I definitely want to use a colour similar to #fe8600 (named colours are very limited).
It seems to me that it would be a lot simpler if I stuck with the “font-color=”” system I was using before.
It worked well until I asked ChatGPT how to create a “Text Factory” in BBEdit (to complete numerous tasks in one operation) that the different coding was recommended.
For now, I will change my test page back to the format I was using before.
Best wishes,
Andy
