Setting Background Opacity for partially transparent FV Player Subtitles | New User Experience

As we are working hard on improving the FV Player Gutenberg interface, we’ve set up some new test sites with the latest WordPress 5.7.2. Most of our VIP sites are on an older version of WordPress as the new features have been of very little value and Gutenberg is just a nuisance for serious publishers, as it interferes with fluid workflow. To keep track of which version of WordPress you have installed and which recommended updates are available, use our own BusinessPress.

I installed FV Player and was offered the opportunity to update my Vimeo codes. A fairly useless exercise as it’s still the Vimeo player in an iFrame. Since there is an FV Player license on the main domain, I was able to immediately apply license to the subdomain. But after applying the license, I’m then given the option of adding the FV Player Pro extension. Clearly it would make more sense to install the FV Player Pro extension automatically after applying the license.

We’ll fix that. It will eliminate an extra step for our users and some confusion.

Even after installing the Pro extension and saving post by hand, I still face the Vimeo player.

Aha, it turns out that when I go over to visit the Hosting tab of FV Player preferences that I must first check “Advanced Vimeo Embedding” and add a Vimeo API key (I knew that but our software wasn’t warning me).

There should be an automatic review of videos within the site to offer upgrading them to FV Player, including a wizard to add both/either of Vimeo and YouTube API keys. We’ll make that happens as well.

Even after adding the API key, I’m still facing the Vimeo default player in an iframe. Now I’m getting annoyed. It turns out that I have to click a checkbox and press convert. The convert button can be pressed without the checkbox checked which makes no sense (there’s no conversion without API enabled so the button shouldn’t be there).

On the upside, there are two ways to get the FV Player settings, from a submenu in the FV Player top level admin menu and from the Settings menu.

After finally adding the video properly, trying to view in higher resolution did not work, when replaying the video. If I start with higher resolution selected, I seem to get the higher resolution. The dynamic quality switcher, at least for Vimeo needs some work.

Now that my video is running with subtitles, I don’t like the Arial white on black default. I’d like to see white Courier on translucent grey titles. Much more elegant and should be the default.

In the Skin tab of FV Player preferences there is a very useful Subtitle section which allows me to choose either Courier New, Helvetica or Tahoma/Geneva (depending on OS). I can also change the background colour of the subtitles. So far so good. There’s even a preview, albeit just on plain black (we should add a default video image here).

I set up my subtitles with Courier New and the grey background I’d like and preview the titles.

Oh no, there is no transparent subtitle background possible at all. The default should be dark grey and partially transparent. We shouldn’t need a separate transparency picker as the main picker allows colours which are by their nature transparent. I didn’t notice the Transparency Slider, which is shown very clearly below.

As I had not noticed the transparency slider, I tried to add transparency via the Custom CSS Box above. It was not easy to determine out what selector to use. We should make a list of selectors and publish them. Searching DuckDuckGo for FV Player selectors, I see we have a page on CSS Tips and Fixes. Great!

Alas, the information in that page is inadequate as I ended up with this result:

 

The whole line now has the transparent background. That’s using this code:

.flowplayer .fp-player .fp-captions {background-color: rgba(0,0,255,0.5);}

Browser Developer Tools, don’t make it easy to investigate the CSS for FV Player, as the right click for “Inspect” does not work. Checking page source code, if there is not advanced caching with minification enabled one can open the original FV Player CSS file to investigate further: https://yourdomainn.com/wp-content/plugins/fv-wordpress-flowplayer/css/admin.css?ver=7.4.47.727

Except that in the CSS file “captions” doesn’t appear once and “subtitle” only once for line-height. There doesn’t seem to be a clear way to fix background transparency.

But a link to the main CSS file, without minification, should be on the documentation page as well. Let’s fix that.

Happily I just noticed that the preview for subtitles in the Skin settings works live and it should be easier to figure out the classes here than in a full player instance.

 

Using Developer Tools Inspect, I figured out that the background is on the p tag. I tried this.

.fp-captions p {background-color: rgba(0,0,255,0.5)}

To my surprise it didn’t work. It did, though, with the !important tag added.

.fp-captions p {background-color: rgba(0,0,255,0.5) !important;}

We have to find a way to make FV Player customisation work without !important

After doing a search on “subtitle transparency”, there’s no way to edit the search, except in the address bar. Which, happily, on Foliovision.com does work. [Searching our forums for “subtitle opacity” doesn’t cough up much useful information. Worse, the “Post New Topic” wizard (excellent way to make sure users at least see existing documentation/discussion) for some reason shows up below the full menu of forums and subforums. The new post wizard should take over the full content of the page.

Suggested topics should open in their own tab, which they do, allowing the visitor to explore forum threads without losing their partially prepared ticket. Congratulations to us for getting this part right.

On the other hand, the checkbox “Notify me of follow-up replies via email” seems unnecessary. If someone posts on the forum, s/he wants follow up so there’s no reason to ask that question. Or the checkbox should be checked by default.

Ideal Transparent Subtitle Background, Two Hours Later

The ideal partial transparent subtitle background is a little more transparent but with a darker base colour. Here’s what I used in the end:

.fp-captions p {background-color: rgba(60,60,60,0.4) !important;}

Of course the built-in subtitle RGB editor does allow transparency. It would help if transparency was a bit more clearly marked here. It seems to me an RGB picker like this one would be more intuitive:

Alternative Colour Picker

Here’s what the final video looks like:

 

FV Player Transparent Subtitles with Courier: Elegant yet Easily Readable

Full video with transparent subtitles:

Ich Schenke Dir

There’s a very important lesson to be learned here. Many good insights can come from installing your own software from scratch on a new website or new computer and setting it up from zero. Working from one’s own public documentation, rather than internal documents or having a colleague show you is also an excellent way to understand and improve the process. Not just the actual information, but the process itself.