search

fregante / iphone-inline-video

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

.IIV::-webkit-media-controls-play-button doesn't successfully hide the button #72

Closed shisaq closed 8 years ago

shisaq commented 8 years ago

Hi, I tried .IIV::-webkit-media-controls-play-button to hide the play button, but failed; Then I changed .IIV into video, it finally worked. I'm a junior developer, I'm not quite sure what .IIV is, but I'm here just explaining video::-webkit-media-controls-play-button works. Thanks for offering such a handy tool!

fregante commented 8 years ago

The IIV class is applied when iphone-inline-video (in short "IIV") is able to act on the element (generally on the iPhone on iOS 8-9). On iOS 10, IIV is disabled by default so the buttons are not hidden.

I hide the buttons out of necessity (they trigger the fullscreen), but if you always want to hide the overlay button, use this instead:

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

This will hide the large play button overlay on all video elements, always, but hide the play button in the controls only when IIV is enabled.