CSS to change play-button/icon

Hello Amanda,

it’s a matter of putting the CSS into the right place. It should load after FV Player CSS to ensure it get the priority. We cover that at the beginning of our guide for CSS modifications: https://foliovision.com/player/advanced/css-tips-and-fixes

As a proof of concept please try to use it with !important for each rule like this:

.is-splash.flowplayer .fp-player .fp-ui,
.is-paused.flowplayer .fp-player .fp-ui {
background: url (https://cdn.foliovision.com/wp-content/uploads/2021/02/video-play-button.png) center no-repeat !important;
background-size: 50% !important;
}
.is-seeking.flowplayer .fp-ui { background: none !important; }
.flowplayer .fp-ui > .fp-play { display: none !important; }

In fact we get asked about similar issues quite often. Perhaps FV Player should provide its own custom CSS field which would already work in a way that would prioritize it properly. That way everybody would know where it needs to be added.

Thanks,
Martin

Hello Amanda,

we will add that custom CSS field, then the tweaks like this will be much simpler. With a bit of luck it should be ready next week.

Thanks,
Martin

Hello Amanda,

the triangular play icon has some shadow behind it, so it can be see even on solid white background. But I see some people might miss it.

Thanks,
Martin

Hello Amanda,

we have worked on adding the custom CSS field into FV Player settings. Could you please reinstall FV Player from this link: https://github.com/foliovision/fv-wordpress-flowplayer/archive/687-custom-css-field.zip

To do that you will have to first deactivate and delete the current FV Player plugin you are using. WordPress will warn you that you might loose settings and data, but it’s not the case with our plugin, no settings now videos will be lost. Or you can just replace the plugin files via FTP.

Then you will find a nice field for you CSS with syntax checking built in at wp-admin -> Settings -> FV Player Pro -> Skin -> Custom CSS. That way your CSS will always load after code FV Player CSS making any customizations easier.

I also adjusted the custom CSS snippet at https://foliovision.com/player/advanced/css-tips-and-fixes#play-icon a bit.

Thanks,
Martin

Hello Amanda,

please put the CSS code back in and let me have a look. If you do it in next 2 hours I will be able to check right away.

Perhaps there is a mistake which you are doing and we can avoid it by improving our guide or our system is not playing with the way your website optimizes the CSS code.

Thanks,
Martin

Hello Amanda,

please check here: CSS Tips and Fixes -> Hiding Lightbox Prev/Next

Thanks,
Martin