Mute/Unmute button for embedded Vimeo video

Ask the community
,
1

Hi guys

I know there have been a couple of solutions posted for similar things, but I haven’t been able to implement it for my website. I would be incredibly grateful if someone might be able to help.

I’ve used the “embed a widget” function to embed a full width Vimeo video to my website. It’s currently set to autoplay, so by standard is muted when the page first loads. Here’s the adapted code:

I’d like to create a button sitting on the video to unmute/mute the video, rather than the user having to find the volume slider.

I’ve seen that my button is called #button2 in the developer code area whereas my HTML component for the embedded video is called #html1

Using commands like:

exportfunction onButton_click ( event )
{ $w ( “#videoPlayer1” ). unmute ();}

Doesn’t work because I’m not using the video player as such. I figured maybe I need to send a message into the HTML component on button click to first unmute, and then send another message on a secondary button click to then mute again.

Replacing #videoplayer1 with #html1 doesn’t work of course as the mute/unmute command doesn’t make sense for this object.

Would anyone be able to help me understand how to get this working? Thank you so much in advance, it’s very much appreciated!! (As you’ve probably gathered I’m very much a newbie when it comes to coding!!)

2

Maybe this one will help you (change the src to an embedded video from Vimeo)

3

Thanks J.D. I’m not really sure how to use what you’ve give me. I’d be grateful for a more detailed explanation if possible?

I see in the HTML code above the use of id = “vi-banner-video” before the src vimeo link. Are you suggesting that this is how I can change the ID of the HTML component? So if I used id = “vi-banner-video” for my vimeo link, I could use the command { $w ( " #v i-banner-video " ). unmute ();} to enable my button to work?

P.s. I’ve also copied and pasted the code above into my wix HTML component bit and changed the link for my vimeo video. However although a custom play/pause button appears, there isn’t one for mute/unmute.

Thanks so much for your help!

4

@animeshraval ,
Since you decided to do it using an iframe, it’s not related to this forum (it is not Velo).
I didn’t have time to read the code there (I just saw it was working).
So you’ll have to figure it out… (if you know jQuery, css and html).

Basically, there’ 3 ways to add an iframe to the page:

  1. Editor > Add Embedded.

  2. Via the dashboard Custom code (premium account)

  3. Using a custom element(premium account)
    The first one is the easier way but it’s less permissive (it is sandboxed and can’t access the outer DOM).
    Try to see in the code whether or not you need the more permissive option.

If you use the linked code (HTML, CSS and JS) it’s supposed to create a mute button inside the iframe (so no need to post from Velo to the iframe).

5

But why won’t you use the Wix videoPlayer element, it will be much easier.

6

@jonatandor35 thank you, I appreciate the replied. I did initially try using the Wix VideoPlayer element, but unfortunately the compression algorithm it uses for the video made the audio sound terrible. My website is an audio website, so I wanted to post high quality examples of my work. For this reason, it seemed that pulling in the video from vimeo allowed for both high quality video and audio at the same time.

I’ll try asking this question on other forums, I didn’t realise my question was out of the bounds of this group. Apologies for that!