title: Embedded video in ios preventing navbar functionality jquery mobile
body: <p>Hopefully a quick fix. </p>
  
  <p>I've embedded a video inside my <code>data-role="content"</code> which scrolls beneath my fixed navbar footer. </p>
  
  <p>This works fine and the video poster/frame also scrolls beneath my footer.</p>
  
  <p>However when the video frame is directly underneath the fixed navbar footer (i.e stacked mid scroll of page) any click on the nav bar responds as if they video frame was actually on top.</p>
  
  <p>So whilst everything appears as it should from a visual standpoint it performs on click the exact opposite way around. </p>
  
  <p>EDIT: This happens when packaged and run in an emulator in xcode, using cordova 2.9.0 and xcode 4.6. It doesn't happen in a web browser. </p>
  
  <p>I've tried to fix this with z-index but it doesn't seem to have worked. Here's the relevant code:</p>
  
  <pre><code>&lt;div data-role="content"&gt;
  
  
  
  
      &lt;video poster="img/logo.png"&gt;
  
          &lt;source src="videos/videosample.mp4" type="video/mp4" /&gt;
  
      &lt;/video&gt;
  
  &lt;/div&gt;
  
  &lt;div class="container"&gt;&lt;img src="img/Background_Dark.png" width="100%"/&gt;
  
  &lt;/div&gt;
  
  &lt;div data-role="footer" data-tap-toggle="false" data-position="fixed" data-id="myfooter"&gt;
      &lt;nav data-role="navbar"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#page" data-transition="fade"&gt;&lt;img src="img/Home_JQuery_Footer_Icon.png" width="35%" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#page4" data-transition="fade"&gt;&lt;img src="img/About_Us_JQuery_Footer_Icon.png" width="35%" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#page3" data-transition="fade"&gt;&lt;img src="img/Request_JQuery_Footer_Icon.png" width="34%" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
          &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks.</p>