Adding controls to the fullscreen-slider video

10 replies · opened Apr 13, 2021

Mmille14Apr 13, 2021

Hi there,

The boss wants viewers to control the sound of the homepage video (the fullscreen-slider video) with the mute/unmute button. Per your response to one old ticket, I added the Controls attribute to the video element, but it did not work. What am I doing wrong. If the feature exists I would like to have just the mute/unmute button without the play and stop buttons.

Thank you in advance for your help.

Regards,

Mille

Mmille14Apr 14, 2021

Hi There,

Thank you for your God send advice. As per your advice, I went ahead and used the video-sound-event page and the video did not work. The funny thing is when I inspect the page in chrome it started working (The mute button still did not work.) and when I reload the page it stopped working. Also, the menu color won't take theme color (purple) instead it takes the original green color. But when I scroll down it takes the theme color that was changed in color.css. I have uploaded the new version in the link here: https://zeehealer.com/staging/index.html. What I am doing wrong? Appreciate your advice.

Thank you in advance.

Regards,

Mille

Mmille14Apr 14, 2021

One more thing. I imported the old content into the new index-video-sound-event.html page so that I can preserve all the page's features.

Thank you.

Mille

Mmille14Apr 15, 2021

Hi There,

I reconstructed the page again one change at a time and I started getting the error when I removed the first slide. When I kept the first slide and removed the third slide the mute button stopped working. I also tried to move the second video slide to the front and that did not work either. I was going to move it upfront and remove the slider arrows. My aim is to have one video slide. Oh well, I hope you have a workaround for this. I really appreciate your assistance.

Thank you in advance.

Regards,

Mille

SSemicolon WebSTAFFApr 15, 2021

Hello,

We have checked out your codes and they appear to be fine. Several points to note:

  1. Autoplay is only enabled when the Video is muted. If the Video has sound, the autoplay will disabled by the Browsers.

  2. We can see some Console errors regarding Site Manifest which might be causing an issue with Site Mute/Unmute.

  3. Please fix the Duplicate ID Codes as mentioned here: https://validator.w3.org/nu/?doc=https%3A%2F%2Fzeehealer.com%2Fstaging%2Findex.html and update the codes online. If the issues are still not resolved, please let us know so that we can check this further. Thanks for your Patience.

To change the Colors, please make sure that you follow this guide: http://docs.semicolonweb.com/docs/getting-started/color-schemes/ and not edit the style.css File.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Mmille14Apr 15, 2021

Hi There,

I tested removing the first slider and third slider on the original index-video-sound-event.html you suggested I use without adding any content of my own and it did not work. My aim is to have the audio and have the ability to mute it with a button. Is there a way I can do that by just having the video slider show and the rest be hidden? Appreciate your help.

Thank you in advance.

Regards,

Mille

SSemicolon WebSTAFFApr 17, 2021

Hello,

Apologies for the Delays in replying and Thanks for your Patience!

The Slider will not autoplay if it is not muted. It is not controlled by us but the Browsers. If you are planning to use just the Video, it is recommended to remove the entire Slider Area. Simply replace the existing #slider block with the following code:
[ch_pre]

			Welcome to Canvas
		
	

	[](#)

[/ch_pre]

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Mmille14Apr 18, 2021

Hi there,

Thank you for your response and advice. Where is the unmute button that was in the video section? I was looking for the mute button. I don't see the mute button on the section posted above. I will be happy to have the video start muted.

Thank you in advance for your help.

Regards,

Mille

SSemicolon WebSTAFFApr 18, 2021

Hello,

Simply add the z-index: 5; CSS property to the existing #video-slider-mute CSS Block at the top of the Page.

This will definitely work fine and display the Mute/Unmute button. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Mmille14Apr 20, 2021

Hi there,

That did it, thank you so much for your assistance.

Regards,

Mille

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard