-
Something changed with my flow player plug-in today and I don’t know what. When I clear the cache of everything and then I go to load the page whether on desktop or mobile, and that page features the flow player prominently – the playlist is broken and all the videos vertical but if I refresh it, they pop back into the gallery player list as they should be. And everything is fine after that. I have disabled all plug-ins to see if they are conflicting with it and that is not the case. I have preloaded Jquery and that does not fix it. This happens whether the cash plug-in is on or off. Cloudflair has been turned off, but it happens with cloudflare on or off. It happens if I disable all my plug-ins except for the flow plug-in. But the flow player plug-in has not been updated in several weeks. The only thing that has changed is WordPress upgraded a couple days ago. I downgraded and no fix. But the issue only showed up today. What do you think is going on and how do we fix it?
-
-
Hold off… I think this is a safari only issue…
So it only happens in Safari but nothing I do can fix this. Empty your cache and go to this page to see it: https://dcdouglas.com/voice-over-male-talent-los-angeles/
Figured it out in general – your beta release does not load properly the first time. I switched to release and it’s fine.
ChatGPT helped me fix issue with Safari via order of functions – https://chatgpt.com/share/fd899026-58f4-4a49-9440-38bb3d13db9c
I was wrong. Still happens. Only Safari. Only when cache of browser is cleared – not cache plugins or cloudflare. they can be on or off.
Happens when all plugins are disabled, as well – https://dcdouglas.com/NoCache-BrokenGallery.MP4
I haven’t fixed it but am using this in my footer temporarily until you have a fix. When you go a player page with an empty cache on Safari you will see it briefly before the auto-refresh hits. (ie https://dcdouglas.com/voice-over-male-talent-los-angeles/)
document.addEventListener(“DOMContentLoaded”, function () { var playlistWrapper = document.querySelector(“.fv - playlist - slider - wrapper”); if (playlistWrapper) { // Trigger a reflow using requestAnimationFrame requestAnimationFrame(function () { playlistWrapper.style.display = “none”; requestAnimationFrame(function () { playlistWrapper.style.display = “flex”; }); }); } });
Hello D.C.,
This issue might occur as by default we only initialize FV Player JavaScript once the user has started interacting with the page. It’s the “Optimize FV Flowplayer JS loading” setting: https://foliovision.com/player/settings/optimize-javascript-loading
However – to avoid this issue we count the number of playlist items in PHP and add the
width: 1000pxto the playlist wrapper.fp-playlist-external. And I see it’s present on your website.So I don’t seem to run into your issue with the playlist thumbs showing in a single column and it does not matter how much I slow down my network and disable cache.
I see you are using Autoptimize, so I wonder if the issue could be related to that. Could it be removing the inline style attributes with one of its settings?
Thanks,
Martin
Couple of additions:
I tried these tests without the new code which you added. So there was no
display: flexto fix the issue.I tried on iPhone too.
Thanks,
Martin
So bizarre. Still occurs on my desktop when cache empty (with or without cache plugins/cloudflare) AND on my iPhone… At a loss… I guess I’ll keep the JS fix just in case…
I’m going to blame ChatGPT in our tweaking of website. Doing this fixed issue –
.fv-playlist-slider-wrapper { overflow-x: scroll!important; /* Enable horizontal scrolling */ white-space: nowrap!important; /* Prevent line breaks within the playlist items */ display: flex!important; /* Flexbox for horizontal layout */ }
This is now resolved. Sorry for being such a bother. AI is helping me immensely 90% of time, and getting me in trouble 10% of time!
