webkit-media-controls dont work on IOS

Hey,

Im using

<style>

*::-webkit-media-controls-enclosure {

display:none !important;

-webkit-appearance: none;

}

*::-webkit-media-controls-panel {

display: none!important;

-webkit-appearance: none;

}

*::--webkit-media-controls-play-button {

display: none!important;

-webkit-appearance: none;

}

*::-webkit-media-controls-start-playback-button {

display: none!important;

-webkit-appearance: none;

}

*::-webkit-media-controls {

display: none!important;

-webkit-appearance: none;

}

</style>

<video id="test" width="100%" height="100%" autoplay="true" preload="auto" webkit-playsinline>

<source src="images/test.mp4" type="video/mp4">

</video>


Which is working fine with older ios version.
But since the IOS10 version on mobile those webkit dont work anymore. The control panel for video is showing.
I can't find the way to hide it.
Any help to hide it would be great!

Thanks!