Video does not Autoplay in chrome – How to mute and fix it?

[Stephen Smith]

Hi,

We have a video header for our front page through the ‘video header’ section of your theme.

The problem we have is that it does not autoplay on chrome/safari since we cannot mute it. Is there a way we can do that either via style.css or functions?

Because we cannot access the video output from the theme, we’re unable to mute the video and therefore fix it ourselves.

Many thanks,

Steve

[Andy]

Hi Steve,

To make the controls visible, add this code to Customize > Additional CSS

.main-header .wp-video .mejs-controls {
    display: flex;
}

I agree the video should really be muted by default so that Chrome and Safari will autoplay the video.

The issue is that the theme uses the WordPress video function which at this present time does not have a muted parameter. This is something that people have been asking for so hopefully it will be included in a future version of WordPress.

[Andy]

Update: we have an update due tomorrow that has a workaround to mute the video by default and ensure videos do not automatically play full screen on iPhone, as well as options to display the video controls, disable the autoplay, and disable the automatic looping.

I’ll post here when it’s released.

[Stephen Smith]

Hi Andy,

Thank you very much for the ‘controls’ code, and looking forward to the update you guys are hard at work on!

Cheers,

Steve

[Andy]

Version 1.7.1 is now available to download/update.

The video header is now muted and there are additional options to disable autoplay and auto looping (enabled by default).

You can remove the custom CSS too, as there is now the option to display the controls (hidden by default).

[Stephen Smith]

Fantastic, very speedy response and the fix works.

Testing it on devices and I can confirm autoplaying is working for users on chrome and safari now.

Keep up the amazing work,

Steve

[Author]

Posts