Video player style slow to load

The video player's styles take about a second to load which causes the player to look slightly different for a portion of the first second. The http://mediaelementjs.com/ homepage is a good example. Hit F5 and watch the video player closely as the page is loading.

I know the video player is now part of the WordPress 3.6 core, but perhaps somebody knows how to resolve this issue?

This happens as you by default see the browser rendering of the audio and video first. Then when the mediaelement js is loaded it takes over it. What can be done here is keep the audio video elements hidden at first and display them using js on page load or once the mediaelement js is loaded.

I had an idea the problem was the browser displaying the un-styled video element!

I'm using this code to hide the media player until the page fully loads:

jQuery('.video-player').hide();

jQuery(document).ready(function() {

jQuery('.video-player').show();

});

The problem is, it doesn't work every time I refresh the page, just sometimes. Which div tag or element shall I target with the hide and show? Or perhaps you know of an easier way of doing it?

Maybe you should try "jQuery(window).load" instead of "jQuery(document).ready"

Thanks! Seems to work now! :)