Html5 Video Layering on iPad

HTML5 Video Layering on iPad

I'm using flowplayer and a simple CSS dropdown menu and had the same problem.

I have drop down menu that, when tapped, covers part of the video area. The submenu shows up over the video as expected, but no touch events were being sent.

I fixed it by combining a couple of suggestions from others answering this question: I set visibility:hidden when opening the menu and visibility:visible when closing the submenu, AND set the -webkit-transform-style:preserve-3d CSS property on the video.

Here's the pertinent code. I left out the CSS for the menubar, but it does what you might expect - resulting in a menu that covers portions of the video.

menu and video HTML

<div id='nav'>
  <ul>
    ... <!-- bunch of ul/li stuff here for the menu and submenus -->
  </ul>
</div>
<div id='videoplayer'><!-- for flowplayer --></div>

CSS

video {
  -webkit-transform-style: preserve-3d;
}

Javascript

$(document).ready(function(){
  $("#nav li").hover(
    function() {
      $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300);
      $("video").css({visibility:"hidden"});
    },
    function(){ 
      $(this).find('ul:first').css({visibility: "hidden"});
      $("video").css({visibility:"visible"});
    }
  );
);

overlay over dynamically inserted video tag in ipad

After some more digging I've found the answer.

Looks like the unmarked answer in this stackoverflow question holds the key.

So, as Jaffa The Cake (who I ow a bucket of thanks) sais : "You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d", the only workaround is to use the css3 property -webkit-transform-style: preserve-3d.

This way, one can put an overlay on top of the video which can handle all the events (such as play/pause).

iPad Safari mobile seems to ignore z-indexing position for html5 video elements

The issue only occurs if the video element was dynamically created. If the element was just in the page as it loaded, z-index works fine.

You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d.

Yep, it's as bad as haslayout on IE!

displaying html5 video in ios without play button overlay

Update: This is no longer the best method - see this answer below for an actual solution.

---

As far as I'm aware, the play button overlay is added by the rendering engine in mobile Safari, so no there is no way to hide it. However, you may be able to spoof it using ajax to load the video when a static image is clicked. For example:

HTML

<div id="videoContainer">

</div>

CSS

#videoContainer {
  background-image: url(http://placehold.it/60x40.png);
  height: 40px;
  width: 60px;
}

JavaScript

$("#videoContainer").click(function() {
  $(this).css('background', 'none').parent().html("<video id=\"video\" width=\"60\" height=\"40\">\n" +
    "<source src=\"video.mp4\" type=\"video/mp4\">\n" +
    "<source src=\"video.ogg\" type=\"video/ogg\">\n" +
    "</video>");
  $("#video").get(0).play();
});

---

Related Topics