Внедренное видео в ios, предотвращающее функциональность navbar jquery mobile

Надеюсь, быстро исправить.

Я встроил видео внутри моей data-role="content" которая прокручивается под моим фиксированным нижним колонтитулом navbar.

Это прекрасно работает, и видео-плакат/рамка также прокручивается под моим нижним колонтитулом.

Однако, когда видеокадра находится непосредственно под фиксированным нижним колонтитулом навигатора (например, сложена средняя прокрутка страницы), любой щелчок на панели навигации отвечает так, как если бы видеокадра была на самом деле сверху.

Таким образом, пока все выглядит так, как нужно, с визуальной точки зрения, он выполняет щелчок по прямо противоположному пути.

EDIT: Это происходит при упаковке и запуске в эмуляторе в xcode, используя cordova 2.9.0 и xcode 4.6. Это не происходит в веб-браузере.

Я попытался исправить это с помощью z-index, но он, похоже, не сработал. Здесь соответствующий код:

<div data-role="content">




    <video poster="img/logo.png">

        <source src="videos/videosample.mp4" type="video/mp4" />

    </video>

</div>

<div class="container"><img src="img/Background_Dark.png" width="100%"/>

</div>

<div data-role="footer" data-tap-toggle="false" data-position="fixed" data-id="myfooter">
    <nav data-role="navbar">
    <ul>
        <li><a href="#page" data-transition="fade"><img src="img/Home_JQuery_Footer_Icon.png" width="35%" alt=""/></a></li>
        <li><a href="#page4" data-transition="fade"><img src="img/About_Us_JQuery_Footer_Icon.png" width="35%" alt=""/></a></li>
        <li><a href="#page3" data-transition="fade"><img src="img/Request_JQuery_Footer_Icon.png" width="34%" alt=""/></a></li>

        </ul>
        </nav>
</div>

Благодарю.