How we can easily Remove Mobile Audio UI

Hello everyone!

I would like to address an issue I'm facing on my website regarding the playback of audio files on mobile devices. Currently, when users click the play button on the audio files on non-mobile devices, they are able to see a progression bar indicating the length of the audio (which is approximately 5 minutes each), and they remain on the same page. However, on mobile devices, when the audio is clicked, it opens in a separate player window without any site navigation or a back button, and there is no progress bar displayed. This lack of user interface (UI) on mobile devices is a significant drawback.

It is quite inconvenient to expect visitors who arrive on my website without prior knowledge to intuitively find the back button or not become confused by the absence of navigation and relevant information. This design choice does not make sense from a usability standpoint. I understand that by having audio on the mobile version of the website, I am taking a gamble with user experience.

Therefore, I am seeking a solution to force the playback of audio on mobile devices to stay within the mobile page itself. Is there a way to achieve this? Any valuable insights or recommendations would be greatly appreciated.

Thank from https://yardgearsguide.com/

You can add this to Settings > Developer Tools > Code Injection > Footer to prevent problem

<script>
  window.addEventListener("load", function(){
    Y.UA.ios = 0; 
  })
</script>