Remove unmute button / edit "element style"

Ckleming
Participant | Platinum Partner

Hi there, can anyone give some advise on how to remove the "unmute" button from the video displayed on this page? Video is without sound. 

 

I have unchecked "mute by default". I have located that I need to edit "element style", and browsed through endless stylesheets and advise on how to do it - with no success.

 

Anyone with a simple solution for me?

Web site: https://www.barde.ai/

 

Screenshot Barde Unmute 2.pngScreenshot Barde Unmute.png

0 Upvotes
6 Replies 6
dennisedson
Community Manager

@piersg , can you offer an opinion here?

Thanks,

Dennis



Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
piersg
Key Advisor

I tested in Chrome, FF and Safari and don't see it. The hidden_controls vidyard attribute is set to true, and I don't see the controls attribute present on the video element in the iframe (meaning that controls are disabled) so I think you're ok. Are you still seeing it? If so, in what browser/any other conditions?

Ckleming
Participant | Platinum Partner

Hi @piersg, the controls are not shwing, but the unmute symbol is.. 

 

Screenshot Barde Unmute 3.png

cspfinlayson
Participant

I had the exact same issue when trying to create a custom module for looping videos (to use for animations instead of using animated GIFs in an image module).

It has a video field, and uses the {% video_player %} tag to display that video in the module output.

As you can see, I have hidden_controls and muted set to true, and while the video controls like play/pause, volume etc are hidden, the mute/unmute button is still always there, despite these settings and the fact that the uploaded video doesn't even have sound.

 

Because the video shows up in an iframe, you can't do anything with CSS so it'll need to be sorted in Hubspot's implementation of the Vidyard player I guess?

 

2021-06-15_13-38-31.png

 

Ckleming
Participant | Platinum Partner

Thanks @cspfinlayson .. Do you have any solutions to this issue.. any workaround?

 

0 Upvotes
cspfinlayson
Participant

@Ckleming I'll start this by saying, the only real, comfortable solution is that Hubspot modify their implementation of the Vidyard player so that the mute button is removed with the other controls. (If anyone on the Hubspot CMS dev team is reading this, please fix the Vidyard player so we don't need to use workarounds!)

 

But, since we can't do that, there is a potential workaround - creating a custom module which uses HTML <video> tags rather than HubL {% video_player %} tags.

 

If you want to create a looping video module which behaves like what you have already (but without the mute button), you can't add a video field to the module, because you can only access the Vidyard player_id for the uploaded video, which you can't use with HTML <video> tags. You can however add a file field to the module, because then you can access the URL of the uploaded file, and display it in the module.html code like this:

 

<video class="looping-video" autoplay loop muted>
  <source src="{{ module.name_of_your_file_field }}" type="video/mp4">
</video>

 

 

This isn't a great solution because:

  • You wouldn't be displaying the Vidyard hosted version of the file, which will have performance implications. The "supported file types and sizes" article for the files tool states "If you upload a video file to HubSpot, it will be transcoded to stream at 2.5 MB per second by default. For faster video streaming, ensure you are using HubSpot Video, powered by Vidyard."
  • Unlike using a video field, the file field doesn't check that you have definitely uploaded a video, which means you could technically upload any kind of file to the module which could break your web page or potentially introduce security risks.
  • You would need to ensure that only mp4 files are uploaded, because you can't check what type of video has been uploaded to the file manager and adjust the type="video/mp4" part of the code accordingly.

Because of this, I wouldn't recommend using that workaround on a site that multiple people can edit, unless everybody knows exactly what they're doing.

 

If it's just this one video you are uploading, a safer and more robust workaround would be to upload the video file to the files tool directly, then create a custom video module which only displays that uploaded video (the video cannot be changed in the page builder). To do this, once you've uploaded your video, you'll need to copy the file_id from the files tool.

 

You'll then be able to set your module.html code to:

 

<video class="looping-video" autoplay loop muted>
    <source src="{{ file_by_id(48635867310).url }}" type="video/mp4">
</video>
<!-- Where 48635867310 is your file_id -->

 

 

You'll need to add some CSS to make sure the video gets sized appropriately on the page, but with this custom module, you can display your video on whatever pages you need to, without the mute button, and in a relatively safe, robust way. 

 

I hope this helps!