PowerPress mobile media player

Question

I am using the MediaElement media player for PowerPress, everything is working fine. The one thing I noticed is on mobile...affecting the podcast showing first.

If you go to: http://joshrodg.com/hallmark/ scroll down to the Latest Media section. The very first li is the culprit. If you click play, you'll notice the duration causes the player to display all funky. I removed the duration, but the player still appears off. The weird thing is that it's only affecting the first li, the other li's appear to be ok.

Does anyone know what causes this and how I could possible fix this besides using a different player?

Thanks,
Josh

Answer 1

This is more of a bandaid, but it'll work for my project. I noticed this behavior seems to be related to the duration of my podcast exceeding an hour - and seems to be isolated to just mobile browsers. So, what I did was just hide the overflow (which may not work for everyone):

/* MediaElement */
.mejs-container[style] {
    overflow: hidden !important;
}

The duration just isn't shown for that podcast, not ideal, but it works. The main thing is the audio file plays without the funky behavior...the play/pause still works...and all of the audio files that have a duration under an hour display the duration just fine and work without issue.

For me this works because it really doesn't disrupt the user experience. I would prefer the duration to be shown, but that's not a deal breaker because there is a progress bar so the user can still gauge how much time is left for a given podcast.

Unfortunately, in this situation (besides switching audio players), this is a pretty good solution and will work for me. Most users probably won't even notice and having a podcast over an hour is not the norm for this site, so having it work this way is a great solution.

Thanks,
Josh