Hello ALL
I am strugggggling right now, long story short I need a video player that contains ONLY a mute/unmute button. I have successfully done this in chrome but the controls of the video still appear on safari and my phone (using chrome).
<video width="800px" height="400px" autoplay muted playsInline disablePictureInPicture controls controlsList="nodownload noplaybackrate">
<source src="https://www.pennyflyentertainment.com/s/MelaVid_Smaller.mp4" type="video/mp4" />
</video>
<style>
video::-webkit-media-controls-start-play-button {
display: inline !important;
-webkit-appearance: none;}
video::-webkit-media-controls-timeline{
display: inline !important;
-webkit-appearance: none;}
video::-webkit-media-controls-current-time-display {
display: inline !important;
-webkit-appearance: none;}
video::-webkit-media-controls-fullscreen-button {
display: inline !important;
-webkit-appearance: none;}
video::-webkit-media-controls-time-remaining-display {
display: inline !important;
-webkit-appearance: none;}
video::-webkit-media-controls-mute-button{
display: inline !important;
-webikit-appearance: auto;}
video::-webkit-media-controls-seek-back-button {display: none;}
video::-webkit-media-controls-seek-forward-button {display: none;}
video::-webkit-media-controls-fullscreen-button {display: none;}
video::-webkit-media-controls-rewind-button {display: none;}
video::-webkit-media-controls-return-to-realtime-button {display: none;}
video::-webkit-media-controls-toggle-closed-captions-button {display: none;}
}
.buttons-container.left {display: none !important;}
.time-control {display: none !important;}
</style>
I tried inspecting the element and found what I think appear to be the correct selectors
to use css to hide them but it’s not affecting them at all no matter where I put the css.
Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)