Jump to content
billjoseph

[Solved] Audio won't display on mobile

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/)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@Klenkes Thank you so much!!!  I couldn't get the height override to work, but after testing saw that it definitely was UIKit that was causing the problem. Updated my UIKit version and there they are!!

Share this post


Link to post
Share on other sites

I just tested it with my LG G4 (Android, Firefox) and the audio players displayed and worked fine.

Share this post


Link to post
Share on other sites

Thanks @dragan - I think I got it worked out just before you tested! 😀  Nice to have confirmation other than just my phone.

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...