Jplayer Playlist Will Not Work in Android or iOS

Question

My implementation of Jplayer appears to be working everywhere but on mobile and tablet, basically Android and iOS. When opened on Android, the playlist play buttons are disabled and the song links are not clickable.

This is my script:

$(document).ready(function () {

var myPlaylist = new jPlayerPlaylist({
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
}, [
        {
            title: "Commerical",
            mp3: "/content/audio/commercial.mp3"
        },
        {
            title: "Characters",
            mp3: "/content/audio/characters.mp3"
        },
        {
            title: "Attitude",
            mp3: "/content/audio/attitude.mp3"
        },
        {
            title: "Business",
            mp3: "/content/audio/business.mp3"
        },
        {
            title: "Narrator",
            mp3: "/content/audio/narrator.mp3"
        },
        {
            title: "Younger",
            mp3: "/content/audio/younger.mp3"
        },
        {
            title: "Guy Next Door",
            mp3: "/content/audio/guy-next-door.mp3"
        },
        {
            title: "English/British Accent",
            mp3: "/content/audio/english-accent.mp3"
        },
        {
            title: "Movie Trailers",
            mp3: "/content/audio/movie-trailers.mp3"
        },
        {
            title: "Smooth",
            mp3: "/content/audio/smooth.mp3"
        },
        {
            title: "High Energy",
            mp3: "/content/audio/stadium-announcing.mp3"
        },
        {
            title: "Phone System",
            mp3: "/content/audio/phone-system.mp3"
        },
        {
            title: "Sam Elliot",
            mp3: "/content/audio/sam-elliot.mp3"
        },
        {
            title: "Stadium Announcing",
            mp3: "/content/audio/stadium-announcing.mp3"
        },
        {
            title: "Cops and Detectives",
            mp3: "/content/audio/cops-and-detectives.mp3"
        }
],
    {
        swfPath: "js",
        solution: "html,flash",
        supplied: "mp3",
        wmode: "window",
        smoothPlayBar: true,
        keyEnabled: true
});
$("#jquery_jplayer_1").bind(jQuery.jPlayer.event.play, function (event) {

    var current = myPlaylist.current,
    playlist = myPlaylist.playlist;
    jQuery.each(playlist, function (index, obj) {
        if (index == current) {
            $('.audio.active').removeClass('active');
            $('.audio').hide();
            var audio = $('.audio').get(current);
            $(audio).fadeIn('slow');
            return false;

        } 
    });
});
});

And the html:

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

    <div id="jp_container_1" class="jp-audio" style="float:left;">
        <div class="jp-type-playlist">
            <div class="jp-gui jp-interface">
                <ul class="jp-controls">
                    <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
                    <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                    <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                    <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                    <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                </ul>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>

                    </div>
                </div>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
                <div class="jp-current-time"></div>
                <div class="jp-duration"></div>
                <ul class="jp-toggles">
                    <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                    <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                    <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                    <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                </ul>
            </div>
            <div class="jp-playlist">
                <ul>
                    <li></li>
                </ul>
            </div>
            <div class="jp-no-solution">
                <span>Update Required</span>
                To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
            </div>
        </div>
    </div>

To make all elements of the site work, I am using jquery version 1.7.2 (even with the migrate script, the latest jquery wouldn't recognize my page anchors).

Does anyone have experience with the jplayer playlist? TIA

Answer 1

The problem is due to a media query changing the .panel-container to float: none. Change it to clear: both;

e.g.

@media only screen and (max-width: 767px) and (min-width: 480px)
.panel-container {
width: 400px;
min-height: auto;
clear: both;

You will need to decide on the layout for that section as the jPlayer will hang to the left on the smaller resolution.