How to disable and hide all controls on Wordpress 4.6.1 videos?

Following my actual code inside a WordPress page:

[video width="560" height="320" mp4="example/test.mp4" loop="true" autoplay="true" preload="auto"][/video]

How to disable and hide all controls on Wordpress 4.6.1 videos?

Following my actual code inside a WordPress page:

[video width="560" height="320" mp4="example./test.mp4" loop="true" autoplay="true" preload="auto"][/video]

• javascript
• css
• wordpress

3 Answers 3

Hi you need to override the inline styles applied to .mejs-controls div for that video shortcode. You can:

.mejs-controls {
  display: none !important;
  visibility: hidden !important;
  }

These controls normally only show on hover unless you tell them to do otherwise. I would ask why you want to disable the controls, taking this ability away from the user can result in her being frustrated with this restriction.

I found a bit more information here on this post: https://wordpress.stackexchange./questions/130402/hide-default-video-shortcode-controls-on-pageload

The non-CSS method is to add a filter to your shortcode output. Put this in your functions.php theme file:

add_filter( 'wp_video_shortcode', function( $output ) {
    $output = str_replace( 'controls="controls"', '', $output );
    return $output;
} );

Which replaces the controls="controls" attribute in the string with a blank space to omit the feature.

I don't think it is bad UX when they are background videos or a small 2-3 second loop since HTML5 videos are replacing GIFs and now have phone/tablet autoplay support when muted.

This might also be useful, it will hide all controls until you hover the video:

.mejs-controls {
  opacity: 0!important;
  transition: all 0.5s ease;
}

.mejs-container:hover .mejs-controls {
  opacity: 1!important;
}

.mejs-overlay-button{
  display: none !important;
  visibility: hidden !important;
}