Hide Video Play Button on iOS Devices

Home/Hide Video Play Button on iOS Devices

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;
}
2017-05-19T15:48:04+00:00 May 11th, 2016|Programming Tips|0 Comments

About the Author:

Warren Chandler is a freelance web programmer and web developer, based in Frinton on Sea, Essex. Warren specialises in web programming, web design, corporate identity, copy writing, SEO, logo and print media for home, work, and mobile platforms.

Leave A Comment