In wordpress 3.6+ when we use default video shortcode [video], controls of video are always visible on pageload. How can we hide these controls on page load and show only when we hover over the video element.

Using the CSS code below, does the trick ...

.wp-video .mejs-container .mejs-controls {
    visibility: hidden;
}

But, controls wont show on hovering then. How to solve the issue?

In wordpress 3.6+ when we use default video shortcode [video], controls of video are always visible on pageload. How can we hide these controls on page load and show only when we hover over the video element.

Using the CSS code below, does the trick ...

.wp-video .mejs-container .mejs-controls {
    visibility: hidden;
}

But, controls wont show on hovering then. How to solve the issue?

• shortcode
• media
• media-library

2 Answers 2

You need to use the hover CSS code to enable it e.g.

.mejs-container .mejs-controls:hover {
 display:block;
}

You could try:

.wp-video:not(:hover) .mejs-container .mejs-controls {
    visibility: hidden;opacity: 0;
}

This way, only showing controls on hover ;)