• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty
Affordable VAST/VPAID for Wordpress has arrived. Serve ads with your videos starting today!

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

16 June 2021 / Alec Kinnear / Leave a Comment

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
play-sharp-fill

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.

Alec Kinnear

Alec Kinnear

Alec has been helping businesses succeed online since 2000. Alec is an SEM expert with a background in advertising, as a former Head of Television for Grey Moscow and Senior Television Producer for Bates, Saatchi and Saatchi Russia.

Categories: FV Player

Related Posts

  1. Making canvas background transparent

    Making canvas background transparent

  2. Subtitles Fullscreen Font Size & Boxx

    Subtitles Fullscreen Font Size & Boxx

  3. YouTube subtitles

    YouTube subtitles

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You can click here to Subscribe without commenting

Primary Sidebar

Categories

  • Business
  • Camera Reviews
  • Case Studies
  • Design
  • FV Player
  • Internet Marketing
  • IT
  • Life
  • SEO
  • Slovak
  • Video of the Week
  • WordPress

Footer

Our Plugins

  • FV WordPress Flowplayer
  • FV Thoughtful Comments
  • FV Simpler SEO
  • FV Antispam
  • FV Gravatar Cache
  • FV Testimonials

Free Tools

  • Pandoc Online
  • Article spinner
  • WordPress Password Finder
  • Delete LinkedIn Account
  • Responsive Design Calculator
Foliovision logo
All materials © 2025 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
  • This Site Uses Cookies
  • Privacy Policy
  • Terms of Service
  • Site Map
  • Contact
  • Tel. ‭+421 2/5292 0086‬

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in .

Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Necessary Cookies

Strictly Necessary Cookie allow you to log in and download your software or post to forums.

We use the WordPress login cookie and the session cookie.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Support Cookies

Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

3rd Party Cookies

This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

Please enable Strictly Necessary Cookies first so that we can save your preferences!