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?

1 Answer 1


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

.mejs-container .mejs-controls:hover {
  • oh yeah, some times pretty straight forward solution dont come to your mind. Thnx for the direction. But actual code should be something like this: .wp-video:hover .mejs-container .mejs-controls { display: block; visibility: visible; } Jan 19, 2014 at 23:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.