search

fregante / iphone-inline-video

📱 Make videos playable inline on the iPhone (prevents automatic fullscreen)
https://npm.im/iphone-inline-video
MIT License
2.06k stars 298 forks source link

CSS to hide play buttons #62

Closed joeyhoer closed 8 years ago

joeyhoer commented 8 years ago

In commit https://github.com/bfred-it/iphone-inline-video/commit/a4ddfc874370c0b0ab1b0ba3d06296695070ad61:

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

was changed to:

.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

and the comment was updated to read "the native play buttons will still trigger the fullscreen, so it's best to hide them (without breaking the video controls)".

I'm wondering if the 5px is necessary. I'm not seeing any issue in removing it, and opacity + pointer-events seems to be sufficient. I also don't see an issue with display: none, but it would be helpful to understand the specific purpose and what it affects.

fregante commented 8 years ago

Good question! The previous code hid the big play button; the new code also hides the play button in the controls bar. Those three properties are necessary to hide it without ruining the spacing of the controls bar.

If you don't intend to use the controls attribute, you can just use this:

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