Hide Default Video Shortcode Controls on PageLoad

In wordpress 3.6+ when we use default video shortcode , 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?

Solutions Collecting From Web of "Hide Default Video Shortcode Controls on PageLoad"