-
How do I totally remove the SVG Icon from loading? The SVG icon expands for a brief moment causing some jittering.
I would like to replace the SVG icon with a WebP icon that has a set width and height.
I have attached a screenshot
-
-
Here is another screenshot of what the icon looks like.
And this is the CSS I am using.
p.fv-flowplayer-mobile-switch { display: none } .fp-play:before { background-position: center; background-repeat: no-repeat; background-size: contain; width: 16px; height: 16px; content: ' '; position: absolute; top: 0; left: 0; margin: auto; right: 0; bottom: 0; opacity: 0; transform: none !important; transition: none !important; } .flowplayer .fp-pause { display: none !important; } .flowplayer.is-splash .fp-preload, .flowplayer.is-poster .fp-preload, .fp-waiting .fp-preload { display: none !important; } .flowplayer .fp-play.fp-visible svg, .flowplayer .fp-pause.fp-visible svg, .flowplayer .fp-waiting.fp-visible svg { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }Hello Jovan,
Please check the HTML code of the page with FV Player on it. Is the player CSS file (typically
fv-player-custom/style-1.css) only loading in footer?It could happen if the player is not part of the post content – then FV Player does not realize the CSS should load in head and will only load it from footer.
In upcoming FV Player 8 we add some styles right on the player DIV element to avoid FOUC (Flash Of Unstyled Content).
Thanks,
MartinI have the fv-player-custom/style-1.css loading in the header.
Is there a way to remove and replace the icon through CSS?
Hello Jovan,
Is the CSS set to load asynchronously? That could explain why the player HTML shows without proper formatting for a fraction of a second.
In that case FV Player 8 could always put in the minimal inline CSS to avoid it.
You can replace the SVG play icon using a CSS background using this code: https://foliovision.com/player/faq-intro/css-tips-and-fixes#play-icon
In FV Player 8 it will be in the plugin settings.
Thanks,
MartinI have my CSS loaded without ASYNC because the majority of the CSS is critical.
I found a solution by minifying and combining all my CSS file into one file.
Now, my html loads at the same time with one CSS file.
The FOUC has gone away.
By combining all my CSS files I improved my Pagespeed score to an average of 74.
Hello Jovan,
Thank you for posting the details.
If you are not using anything to defer the CSS then the player loading should case no layout shifting or flash of un-styled content. It’s strange that you had to let your cache plugin to process the CSS so much (concatenate and minify) to get decent scores.
But the score depends on other page elements too. We found that foliovision.com scores do not improve if the optimize the CSS or JS in anyway, but for other websites where our clients serve ads it does improve the scores a lot.
Thanks,
Martin
