displaying html5 video in ios without play button overlay

Question

I am trying to display an image that when clicked will open up a video player in html 5, but I don't want the little semi-transparent play button to appear over it. Is there any way to specify in the tag not to put that icon over the poster image and just display the poster image as is?

Answer 1

You can hide the overlay play button on the iPhone with just some CSS:

video::-webkit-media-controls-start-playback-button {
  display: none;
}

Answer 2

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();
});