-
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.
-
-
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.
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
Hello Juraj,
I want to show both “…the large play button and controlbar.”
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.
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.
Still waiting for help about this
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
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?
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
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
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
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?
However, I have tried to use it directly as it appears and their’s no change.
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
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
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
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.
