• 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

How to show controls before playing the video. CSS Help.

[Solved]

Foliovision › Forums › FV Player › How to … › How to show controls before playing the video. CSS Help.

  • Deewin 5 years ago

    Hello guys,

    Is it possible to use CSS to show player controls panel on the bottom of FV Player before a visitor hits the large play button? Can’t find it in settings. As it is right now, it’s only the large center play button.

Viewing 17 replies - 1 through 17 (of 17 total)
  • Deewin 5 years ago

    For illustration, I want the player control panel to be visible before a visitor presses the large play button. Right now, it only shows up when the user presses play.

    fv-player-4
    FV-Player
    Juraj Kacaba 5 years ago
    Avatar photo

    Hello Deewin,

    Do you want to show the large play button and controlbar or you want to show controlbar instead of the large play button?

    Thanks,
    Juraj

    Deewin 5 years ago

    Hello Juraj,

    I want to show both “…the large play button and controlbar.”

    Deewin 5 years ago

    Also,

    Apart from having both the large play button and control bar display before playing a video, is it possible to have them both display when a video is paused? When a video is paused only the control bar shows. I would also want both of them to display when a video is paused.

    In short,

    1. Display both Large play button and control bar before video is played.

    2. Display both Large play button and control bar when a video is paused.

    Deewin 5 years ago

    Let me refine it a bit for part 1

    1. Display both Large play button and control bar before video is played or stops at the end of the video.

    2. Display both Large play button and control bar when a video is paused.

    Deewin 5 years ago

    Still waiting for help about this

    Martin 5 years ago

    Hello Deewin,

    please enable Settings -> FV Player -> Sitewide FV Player Defaults -> Controlbar Always Visible and then the controlbar will always appear.

    To make sure the play button shows up over the video when it’s paused, please read our CSS tip here: https://foliovision.com/player/advanced/css-tips-and-fixes#play-icon-paused

    Thanks,
    Martin

    Deewin 5 years ago

    Hello Martin,

    Thanks for your response. In response to my query above, I need the control bar not to be parmanent but follow the rules of the large play button.

    In this case, the control bar should appear alongside the large play button before video plays. Once the visitor clicks play button the control bar also disappears and only shows up if the visitor hovers over the playing video. The same should happen when the video comes to a stop. Is that possible?

    Martin 5 years ago

    Hello Deewin,

    if you want to show control bar before playing the video, but not show it at all times, then you can simply override this line of CSS in your theme: https://github.com/foliovision/fv-wordpress-flowplayer/blob/master/css/flowplayer.css#L30

    However that makes even the fullscreen button visible, so perhaps this could suffice:

    .flowplayer.is-splash .fp-ui .fp-controls { display: block; }

    Thanks,
    Martin

    Deewin 5 years ago

    Hello Martin,

    Thanks for your response. How do I override that line of CSS? Kindly provide me the CSS code of how it should appear, then I’ll transfer it to my website’s CSS.

    Regards

    Martin 5 years ago

    Hello Deewin,

    when we post these CSS tweaks, we assume that you have some knowledge of how it works. So please try to do that, as we cannot provide support for any customization out there.

    At the same time we want to make sure our player covers the video publisher needs. So if you have a new mode of the controlbar operation in mind, or perhaps you are trying to mimick a popular player, we are happy to hear about your suggestions.

    Thanks,
    Martin

    Deewin 5 years ago

    Hello Martin,

    Thanks for your response. I know where to apply the CSS tweaks that you’ve given me and so far so good.

    I’m not sure how to override that line of CSS that you’ve pointed out. That’s all the assistance I need. I won’t ask much of that from here.

    Or maybe there’s a misunderstanding somewhere. Should I use that line of CSS directly as it appears on Github?

    Deewin 5 years ago

    However, I have tried to use it directly as it appears and their’s no change.

    Martin 5 years ago

    Hello Deewin,

    please make sure you read the introduction to that CSS guide: https://foliovision.com/player/advanced/css-tips-and-fixes There is a note about “priority”.

    Thanks,
    Martin

    Deewin 5 years ago

    Hello Martin,

    I have asked if I should use it directly as it appears on Github or modify it a bit but you’ve not made mention of the side I should take.

    That will help if I should use page inspect to troubleshoot.

    Regards

    Martin 5 years ago

    Hello Deewin,

    I posted that link to Github where the FV Player CSS can be seen and I said you need to override that line of CSS. That line makes the elements of the Flowplayer user interface (.fp-ui > *) invisible in the splash state with display: none, so you would have to change that in your theme CS file.

    Then I posted another line which should work. If it won’t then this line from our CSS guide at https://foliovision.com/player/advanced/css-tips-and-fixes should give you a good start:

    To boost the importance of the CSS rule make sure you prepend more selector classes or IDs in front of it. Just adding #content should help with most templates.

    Thanks,
    Martin

    Deewin 5 years ago

    Hello,

    Thanks for your reply. I did try to override it and the control bar showed up. However, it looks jumbled up but I will try to follow the CSS resources you’ve provided to see if I can fix it.

    Thanks for your assistance.

Viewing 17 replies - 1 through 17 (of 17 total)
Reply To: How to show controls before playing the video. CSS Help.



Please Sign in or Register to upload files.

Related Posts

  1. Video not playing? How to check if Vimeo video hosting is down or if the issue is with your own website

  2. Setting Up Video Quality Switching

  3. Playing YouTube videos in your own player

Primary Sidebar

Sign in Register
FV Player Docs Post New Topic

Welcome

to Foliovision support forums! We'll be happy to provide free support to resolve all the reported bugs. You always can start by specifying your OS and browser and steps to reproduce the bug.

If you need help with the installation on your site, please submit a request for a Pro Support Incident. We'll have you up and running in no time, with detailed instructions on how to resolve your issue yourself in the future.

Facing a hard to solve WordPress problem? On a tight deadline?

Let us take care of it for you
right now.

Pro Support Buy FV Player

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!