Jump to content

[Solved] Audio won't display on mobile


billjoseph
 Share

Recommended Posts

I have a site with a number of audio files on the page, displayed using the <audio> tag.  Works just fine on desktop (and responsively if I resize my browser), but won't display the audio player when viewed on my phone.  I've copied the code to another PW site and it works there on mobile. I've checked with my host to confirm that it's not a server issue. Even added the code as a standalone .html page on the site and it worked there. The only idea I've got left is that I've done something in my templates, or misconfigured something in PW or the modules, but frankly I'm stumped.

What would cause embedded audio to display on desktop, but not on mobile?

I'm running PW 3.0.148 (just updated - had same problem in 3.0.96), and I'm using delayed output.

(I don't know if I'm allowed to add the url to the page where the problem is, but if so it's here: https://tigerswingband.com/bands/mtsb-drumline/)

Link to comment
Share on other sites

My desktop Chrome doesn't show it either, but my iPad Mini does...

The problem lies in your CSS.
Remove the height:auto from the audio element. Mhh.... the height:auto comes from uikit.min.css... however, I do a lot of audio elements on my websites and I never specify a height. Let the browser decide it!

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...