Remove unmute button / edit "element style"

[Ckleming]

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/

[cspfinlayson · Accepted solution]

@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!

[ckingg]

@cspfinlayson I tried your last suggestion - the safer more robust one and I am getting the video to load and autoplay but it won't loop. Any ideas? 

[cspfinlayson]

Hey @ckingg. Not totally sure why that would be. The HTML <video> loop attribute has strong cross-browser report, but I'm seeing on articles like this one people having some of the following issues:

• Certain videos not looping for no apparent reason (resolved by converting to a different file format)
• The order of the <source> tags causing issues (if you have included more than one within your <video> tags)
• The MIME type e.g. video/mp4​ not correctly matching the actual file format of the video 

Have you tried testing it out with other video files to see if they work alright, or on a different browser?

If you have tried a few things and don't find success, it would be helpful if you could share a link to a public page containing your module - that way I can have a quick look and see if anything stands out?

[cspfinlayson]

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?

[Ckleming]

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

[piersg]

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]

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

[dennisedson]

@piersg , can you offer an opinion here?