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; }
Leave A Comment