Things to avoid with Video.js on mobile

2015-03-13 | #android, #ios, #javascript, #solution, #webdev

Video.js on mobile needs the play button like air to breathe. Remove the play button or set it to display:none and Android and iOS will most likely not display anything anymore, even if you trigger play via API programatically.

The trick is to keep the play button clickable in DOM, by setting it to opacity 0 e.g., and make sure, that any additions you provide to the player happen between the video object and the play button.

The play button is positioned as a sibling to the video with z-index 2, so any sibling to the video with z-index 1 should be fine. Just. Don't. Remove. The. Play. Button.