WIP: Video element mute option

How To
1

I want to add a Vimeo link using the video element from the left panel but when the video starts playing I want it to be muted. Is there a way to do this?

2

@luistinygod @timmse A member on Facebook suggested to add an ID to the video element and then add the js code but it still didn’t work.

Screen Shot 2022-01-11 at 8.15.07 AM
Screen Shot 2022-01-11 at 8.15.07 AM574×544 44.4 KB

3

@wolfgang Thanks so much for the help, he was able to provide a solution.

4

Hi Alex,

Can you please share the solution so other users can benefit from it in the meantime?
We’ve decided to implement the mute option in one of the following versions for the video element.

Best regards,
timmse

5

Hey Timmse,
basically it was just a quick fix to add the parameter ‘muted’ to the URL of the Vimeo iframe src. What you have to do is give the Video element in Bricks an ID of ‘#vimeo’ (or whatever you want to, but then you have to change that target here in the js-code too). And there were two different attributes which Bricks uses: ‘data-src’ and ‘src’. I just had a quick look at it and it seemed to me that the data-src get’s passed to the ‘src’ attribute when the video is in viewport so that’s why I targeted both attributes, just to make sure both cases are covered. I’ve also set a timeout to make sure that the attribute is already available, you may have to adapt that if your Video is in you hero-seciton for example … It’s not a very pretty solution, but for a quick workaround it does it job! Also note that you may have to replace the ‘&muted=1’ with ‘?muted=1’ if there are no other options like autoplay selected:

<script>
  jQuery(document).ready(function($) {
    setTimeout(function() {
      var target = $('#vimeo').find('iframe');
      var src = target.attr('data-src');
      src = src + '&muted=1';
      target.attr('data-src', src);

      src = target.attr('src');
      src = src + '&muted=1';
      target.attr('src', src);
      
    }, 500);
  });
</script>
1 Like
6

Hi Wolfgang,

thanks so much for providing the code and the explanation!

Best regards,
timmse