Canvas Support

Display Sound icon on Youtube Video

7 replies · opened Jan 27, 2017

MmikegJan 27, 2017

How do you add a sound control icon over the youtube video?

MmikegJan 27, 2017

How do I add the sound control over the video? 

		<div class="section yt-bg-player nomargin dark" data-quality="hd1080" data-video="https://youtu.be/HK65oyBBxD4" style="height: 600px;"></div>
SSemicolon WebSTAFFJan 31, 2017

Hello,

You can simply add the following code to your Slider Area: 

mute/unmute

You can then Style the Button according to your needs and design preferences.

This will definitely work fine. Hope this Helps!

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

MmikegJan 31, 2017

Hi Thank you for the quick response!
I can see the button under the video but it's not doing anything....

          <div class="container clearfix">
				<div class="section yt-bg-player nomargin dark" data-quality="hd720" data-video="https://youtu.be/HK65oyBBxD4" style="height: 600px;"></div>
				<button onclick="jQuery('#[playerID]').YTPToggleVolume();">mute/unmute</button>
           </div>

--

you can check the page here: wwww.blendmount.com/newsite/

SSemicolon WebSTAFFFeb 1, 2017

Hello,

Please make sure that you change the #[playerID] in the Code to #youtube-video and then add this ID to the .yt-bg-player Element. So your code will look something like this: 


	
	mute/unmute

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.

MmikegFeb 1, 2017

Is this code working on your browser? Still no volume control. What do I do wrong?

<div class="container clearfix">
<div class="col_half">
<div id="youtube-video" class="section yt-bg-player nomargin dark" data-quality="hd720" data-video="https://youtu.be/HK65oyBBxD4" style="height: 400px;"></div>
<button onclick="jQuery('#youtube-video').YTPToggleVolume();">mute/unmute</button>
</div>

SSemicolon WebSTAFFFeb 2, 2017

Hello,

Yes! We have already checked out this code on our browsers and everything appears to be working fine for us. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Additionally, also make sure that you check out your Codes on https://validator.w3.org to see if there are any HTML Validation Errors.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

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