It’s fair to say that developing websites that work the same on an Apple device as every other device can be a frustrating thing, especially when it comes to HTML5 video.

Apple will always point out that videos use a lot of processor power, and in turn drain your battery far faster than usual, but seeing as most of us are watching videos on our iOS devices on a daily basis, this shouldn’t be an issue in reality.

And if you’ve developed a website that has a HTML5 video, chances are that you’ll see a play button smack bang in the middle of your video as you load the page.  Not necessarily a major issue, but it can be when it comes to using video backgrounds which are becoming more commonplace, especially in a website slider.

Fortunately, removing the play button is a simple fix and can be implemented with a little CSS.  Simply add the following code to your stylesheet and your play button blues will be a thing of the past.  Of course, that doesn’t help the video autoplay, but we’ll cross that bridge in another article.

The Code

video::-webkit-media-controls {
    display:none !important;
}