Mute Button for Video Slider

Hi,
How can I add a mute button to the bottom of the video slider? See attached image and the link https://demo.mageewp.com/onetone/

I should have the ability to change the color of the control button to match my website colors.

Here is my website http://client123.website/

Thank you,

Hi,

You can enable the control bar which includes the volume control by adding this in a custom CSS plugin:


@media only screen and (min-width: 1025px) {
	.video-container .mejs-controls {
		display: block !important;
                z-index: 11;
	}
}

Hi Vlad,
I added the code in the CSS plugin but I don’t see a mute button on the screen like the one I pointed in the image, hence the music cannot be turned off if required. Can you please help.
Thank you

I keep getting this message on the video “error loading this resource." Please see attached image.

Seems to load fine for me. In what browser are you checking?

The button won’t be like the one you showed. There’s a control bar at the bottom of the video when you hover over it. That’s where the video can be paused or muted.

Hi Vlad,

I have viewed the video in FireFox, Google Chrome, Microsoft Edge but I don’t see any control bar. Would it be possible to send me the image of the control bar that you see at your side ?

Here it is: https://snag.gy/Dq4CBU.jpg

If you want, you can also make the bar show at all times by adding this too:


.video-container .mejs-offscreen { clip: initial; }

I guess with some more extensive CSS you could even extract only the buttons for play and mute if you don’t like the bar.

Thank you for this, after adding the code the bar does show however I would like to have the buttons for play and mute only - see screenshot below.

Please note the bar does not show on the mobile phone – I have Samsung Galaxy 4.
I cleared the browser history on my phone to see if that would help but I still couldn’t see the bar.

I noticed that the video takes longer to upload on the mobile phone and the music keeps cutting off.

I keep getting this message on the video “error loading this resource.” Please see attached image. I get this message on both the desktop and the mobile phone.


Thank you,

Have you filled up all the formats? Please note that the video is processed using the default Wordpress video shortcode, so as long as you make sure to have all the required video formats correctly encoded, it should work fine. I can’t see the error personally.

So this code will extract only the play/mute buttons. You can style it further if you need it, we can’t help you much with custom code.


.mejs-controls div,
a.mejs-volume-slider {
    display: none !important;
}
.mejs-button.mejs-volume-button.mejs-unmute,
.mejs-button.mejs-volume-button.mejs-mute,
.mejs-button.mejs-playpause-button.mejs-pause {
    display: block !important;
}
.mejs-container .mejs-controls {
    background: transparent !important;
}