Foliovision › Forums › FV Player › Troubleshooting › YouTube Backend Showing Live Frontend Not
-
Hi there,
When we embed a YouTube video using the youtube.be/xxx link, it renders correctly in the FV Player. However, when the video is in LIVE status, we can correctly see “LIVE” in the toolbar of the backend of our WordPress. However, on the frontend, the video plays but doesn’t show as a LIVE video in the toolbar of the player. As a result, users can’t see that the video is LIVE.
Could you please help us identify the issue?
We’ve tried excluding certain elements in WP Rocket, but it seems that WP Rocket and JavaScript might not be the root cause of the problem.
Any feedback you can provide would be greatly appreciated.
Thanks,
-
-
Hello Sven,
Please verify that you are using the API key in FV Player’s YouTube setttings.
Please also let us know which video you are using and if it’s still live.
Thanks,
MartinHi Martin, thanks for getting back. Yes we are using the YouTube API and there are no errors reported.
You could check this one which is currently not live and then not showing the LIVE at when click at the play button
https://www.livetube.tv/news/video-live-kristi-noems-confirmation-hearingYou could check this one which is currently LIVE
https://www.livetube.tv/news/video-live-polish-prime-minister-donald-tusk-meets-ukraines-president-volodymyr-zelenskiyWeirdly, sometimes we see the LIVE also in the frontend.
Thanks for checking, appreciate.Thanks
SvenHello Sven,
Please upgrade to FV Player 8.
I tried to insert your video with it and the YouTube “Live” status was properly detected. You can see how this works in our documentation: Live Streaming with YouTube
Thanks,
MartinHi Martin,
Thanks for the feedback. I’ll do the upgrade.
However, here’s a thought that might mean the upgrade doesn’t change it either.
We post the link to our page when the video is scheduled for live. At the moment, the YouTube Player shows a message like “live in xxx minutes.”
My question is: Will there be another API call to detect when the video starts streaming? Is it then checking again when a user enters the page?
We’ve noticed that when we include the link when the YouTube video is in the “live” state, everything works fine. But when the video switches from scheduled to live, it seems that the player isn’t picking this up.
Just a thought, but could this be a reason for how the API call is done?
I’ll check Player 8 and report back.
Thanks,
SvenHi Martin,
We’ve updated to FV Player 8, as you can see from the updated license.
We’re encountering an issue with WP Rocket blocking some JavaScript. Disabling WP Rocket resolved the problem.
When WP Rocket’s JavaScript optimization is enabled, we see the following error:
fv-player-youtube.min.js:1 Uncaught SyntaxError: Unexpected token ‘}’
fv-player-youtube.min.js:1Could you please advise us on what we need to include in the WP Rocket exclusions and in which fields?
Specifically, we need to know about:
- Minify
- Exclude
- Defer
We needed to disable WP Rocket entirely and it would be good to get it back activated and all running.
Thanks a lot,
SvenHI Martin,
also we checked on the initial problem.
We are still experiencing the same issue,
When watching a video in the backend , the player correctly renders and shows LIVE.When we watch in the frontend, it does not show this.
Rocket is now disabled.
See the two screenshots:
Frontend:
https://drive.google.com/file/d/18WrGOkTrRVjE0B1wsPdgdc5khbVyXzVl/view?usp=drivesdkBackend:
https://drive.google.com/file/d/1lXUTGwJcee7417WyM5ygxKx1CfCvJUkD/view?usp=drivesdkLet me know what additional info you would need
Many thanks for your help,
SvenSince I can not alter my comment, just one other note:
We are using the embed code
https://www.youtube.com/watch?v=J0FEi8Jh5KIWhich only when the video becomes live changes to
https://www.youtube.com/live/J0FEi8Jh5KII can see in our post this embed now
<!– wp:embed {“url”:”https://www.youtube.com/watch?v=J0FEi8Jh5KI”,”type”:”video”,”providerNameSlug”:”youtube”,”responsive”:true,”className”:”wp-embed-aspect-4-3 wp-has-aspect-ratio”} –>
<figure class=”wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio”><div class=”wp-block-embed__wrapper”>
https://www.youtube.com/watch?v=J0FEi8Jh5KI
</div></figure>
<!– /wp:embed –>But still https://www.youtube.com/watch?v=J0FEi8Jh5KI is the one which shows in the backend the correct status.
Hello Sven,
Could you please reinstall FV Player from this link? https://foliovision.com/downloads/fv-player-8.zip
Then you should be able to use WP Rocket optimization again. I found our changes to YouTube would not minify properly with it, so I increased compatibility of our scripts by not transforming
do...while
loops intofor
loops.I will check how we could improve our YouTube live detection. It seems it’s not reliable enough.
Thanks,
MartinHi Martin, we re-installed FV Player 8 and this seemed to have solved the WP Rocket issue. Videos are now working again.
However the LIVE status issue is still existing
You can check here: https://www.livetube.tv/news/video-live-nasa-astronauts-perform-spacewalk-to-complete-upgrades-on-the-international-space-stationThis video is currently LIVE but the status is not showing in the Frontend. In the Backend we can see LIVE also in the FV Player
Thanks for advise
SvenHello Sven,
Thank you for the link.
I tried to load the page and play video about 5 times in Brave (like Chrome) and it would always show as being a live stream. But it never worked for me in Safari on iPhone. Same issue with Safari on Macos.
So it seems the issue is mainly with Safari.
Thanks,
MartinHi Martin
thanks for checking, however in the backend all works fine with your player. It is just in the frontend that it does not work.
When I disable FV player then it works in Safari,
Check the same URL, we have disabled FV Player
https://www.livetube.tv/news/video-live-nasa-astronauts-perform-spacewalk-to-complete-upgrades-on-the-international-space-stationThanks for your ongoing help
SvenStill original link – we checked
https://www.youtube.com/watch?v=q04Pg9XWLYwHi Martin,
We’re encountering another issue with the new FV Player 8 and YouTube videos.
When a user pauses a video in mobile browsers (we tested both Safari and Chrome), it’s unable to be restarted, regardless of whether the user uses incognito mode or not.
Here’s a video demonstrating the problem:
https://drive.google.com/file/d/1OfkYhBEHjPLCrDJHM37bVbe0mRlUijv1/view?usp=drivesdkHere’s the link to the video:
https://www.livetube.tv/news/video-hero-mother-dog-carries-dying-puppy-to-vet-for-treatment-before-watching-medics-battle-to-save-herAdditionally, we’ve attempted to eliminate the lazy load/delay JavaScript, but we haven’t been successful. We received the following code from WP Rocket:
/wp-content/plugins/fv-player/freedom-video-player/fv-player-youtube.min.js
/wp-content/plugins/fv-player/freedom-video-player/fv-player.min.jsDo you have any alternative suggestions?
Thanks a lot for your assistance,
SvenHello Sven,
This is caused by the custom play icon you are setting up using CSS on
.is-paused.flowplayer .fp-player .fp-ui::after
. That part of the selector makes it show when video is paused.Please remove that part of the selector or switch to the new code as shown in https://foliovision.com/player/faq-intro/css-tips-and-fixes#play-icon
Thanks,
MartinHi Martin
thanks for getting back.
We might have a misunderstanding here.
All works in desktop currently Player 8 but not on mobile.
It worked in mobile in the Player 7.The issue is not with the button and that it shows in paused state.
The issue is that in mobile, when the user pauses the video, a click does not do anything anymore. The video can not be restarted anymore.In the videos I shared, you see the behavior,
Please find our current CSS here also, if this might help.
Many thanks for your help
Sven/* Use the ::after pseudo-element for the play button */ .is-splash.flowplayer .fp-ui::after, .is-splash.flowplayer .fp-player .fp-ui::after, .is-paused.flowplayer .fp-player .fp-ui::after, .lightbox-starter.flowplayer .fp-ui::after, .show-video-button::after { content: ''; display: block; background: url(https://cdn2.livetube.tv/news/wp-content/uploads/sites/8/2023/06/500_500LT_playbutton_w.png) center no-repeat; background-size: 14%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; } /* Adjust the size of the play button for mobile devices */ @media (max-width: 480px) { .is-splash.flowplayer .fp-ui::after, .is-splash.flowplayer .fp-player .fp-ui::after, .is-paused.flowplayer .fp-player .fp-ui::after, .lightbox-starter.flowplayer .fp-ui::after, .show-video-button::after { background-size: 14%; /* adjust this as necessary for mobile devices */ } } /* Hide the play button while seeking */ .is-seeking.flowplayer .fp-ui::after { display: none; } /* Hide the original play button */ .flowplayer .fp-ui > .fp-play, .flowplayer.is-splash .fp-ui > .fp-play { display: none !important; }
Hello Sven,.
I understand the issue. The fact that the CSS targets
.is-paused.flowplayer .fp-player .fp-ui::after,
prevent proper handling of click to resume the video on mobile.Please either remove that part of selector or use the new CSS code for FV Player play button customization: https://foliovision.com/player/faq-intro/css-tips-and-fixes#play-icon
Thanks,
MartinThanks, Martin! I believe we’ve identified the solution!
As per my earlier question, could you please suggest how we can disable the JavaScript delay using code? We would prefer the player to load completely even without any user interaction.
I believe we’ll have everything we need then. I’m just waiting for your advice on the LIVE issue with Safari Mobile.
Best,
SvenHello Sven,
About the loading delay – are you using “Optimize JavaScript loading”? Details on it can be found here: https://foliovision.com/player/settings/integrations-compatibility-options
Or are you using “Delay JavaScript execution” in WP Rocket?
Thanks,
MartinHello Sven,
Could you please reinstall FV Player from this link? https://foliovision.com/downloads/fv-player-8.zip
Then the Live status of a YouTube video will show properly on Safari and iOS.
Once you confirm that it helped we will make it part of the next release.
Thanks,
MartinHi Martin,
sorry for the slow response today and thanks for your help. Will do this as soon. as we have finished another project here.
Would this also fix the issue we have in Safari with our HLS link?
Otherwise I suggest to come up with a time and I will make a live stream so that you can check on an active URLHope this makes sense
Thanks
SvenFOR YOUTUBE on our site we have created the video as well:
https://www.livetube.tv/news/video-live-russia-says-it-shot-down-337-ukrainian-drones-over-10-regionsHello Sven,
I can see the issue. It seems your Bunny CDN is not set to vary for the “URL Query String”: https://bunny.net/blog/introducing-vary-cache/
So when we release new FV Player version and the URL of the JavaScript file changes, it hangs on to the old version.
Here’s where to find that setting: https://support.bunny.net/hc/en-us/articles/360020604140-Understanding-Vary-Cache#6
Please fix that setting, purge the CDN cache and your browser cache.
Thanks,
MartinHi Martin, great news – this seems to work now. Let’s see and wait if it also, stays after all caches have fully re-activated.
Also, I think we found the issue with the var
It was in WP Rocket that we excluded fv_flowplayer_mobile in query strings during a previous test and probably forgot to take it out.
Let’s hope this fixes the issue with the VAR not being recognized. However, we also reported it to EWWW, and I am waiting for a response. Sorry for the additional work you had to double-check.One additional question/ suggestion:
It would be good in the player – same as with YouTube – that users could click on LIVE and the video jumps to the actual livestream.
Currently, when the user pauses the video, it just restarts from the same position, but there is no option to bring it to the actual live again.
In YouTube when it is not LIVE LIVE the icon goes from red to grey. Then you can click it, and it becomes red again, indicating that we are LIVE LIVE.
See the image with the arrow about the position I am talking about
https://drive.google.com/file/d/1lePqes-0FFE_9Nnk9jYdeWLDHLbHnh69/view?usp=drivesdk
Thanks
SvenHi Martin, many thanks this is great!
One other thing, when a video is scheduled for Live by YouTube like this one currently https://www.livetube.tv/news/video-watch-live-karoline-leavitt-holds-white-house-press-briefing-2 then in desktop chrome browser the splash screen opens up and shows correct;ly the Notify Button from YouTube and the time when the video is scheduled.
However in our mobile browsers both Chrome and Safari nothing happens when a LIVE YouTube is scheduled and we click the video. Also on Safari desktop it does not do the trick.
Could it be that anything in caches blocks this function or is there anything else needed to have it working correctly in mobile devices?
See the screenshot here from the desktop for what I am talking about
https://drive.google.com/file/d/1YKqVG2HOtYk_PY3AIuQBb1Nce985PA8D/view?usp=drivesdkSame with these kind of videos which are removed after upload.
The info does not go through in the frontend and on mobilehttps://drive.google.com/file/d/1gxGC0_wEZXImsRTiD1BoYRoRWuWoA6-X/view?usp=drivesdk
Here what it shows on Safari in mobile and Chrome in mobile
https://drive.google.com/file/d/1YeD_PkwigYtrHUy7VezkryNNzckFEB1V/view?usp=drivesdkHello Sven,
Could you please reinstall FV Player from this link? https://foliovision.com/downloads/fv-player-8.zip
We have improved the live stream count-down of YouTube to show on mobile.
However the messages for removed videos or videos which have embedding disabled seem to be sufficient.
We are still checking on the live stream pausing.
Thanks,
Martin