HTML5 audio/video doesn't work using fancybox overlay on iOS
===

When I embed an HTML5 audio/video tag into the fancybox overlay, the audio/video player doesn't display using any iOS device (iPhone/iPad).  When calling open_audio_overlay() you can use this MP3 http://www.w3schools.com/html5/song.mp3.  I am using version 2 of fancybox (the latest code).  I have provided the following code that I am using:

CSS:

    div.overlay .fancybox-skin
    {
        background: #1f1f1f;
        border-radius: 8px;
        color: white;
    }

    div.overlay-content
    {
        background-color: black;
        padding: 20px 10px 20px 10px;
        border-radius: 4px;
    }

    div#audio-overlay
    {
        display: none;
        text-align: center;
    }

HTML:

    <div id="audio-overlay">
        <div class="overlay-content">
            <div id="audio-title" style="margin-bottom: 10px; text-align: center; font-weight: bold;"></div>
                <audio id="audio-player" controls="controls" autoplay="autoplay"></audio>
        </div>
    </div>

JAVASCRIPT:

    function open_audio_overlay(url, title)
    {
        $('#audio-player').attr('type', 'audio/mp3');
        $('#audio-player').attr('src', url);

        $('#audio-title').html(title);

        $.fancybox.open($('#audio-overlay'),
        {
            wrapCSS: 'overlay',
            openEffect: 'none',
                helpers:
                {
                    overlay:
                    {
                        opacity: 0.50,
                        closeClick: false,
                        css:
                        {
                            cursor: 'auto'
                        }
                    }
                }
        });
    }