How To Change Layout Of Controls In Video-js

I just started using (trying to use) video-js about a week ago, for my HTML5 video projects. It didn't take too long to realize that I do NOT like the default layout of things at t

Solution 1:

Ah...no javascript is needed at all.

Just a few lines of CSS.

So, in the header, below the link that includes the CSS for video-js, add:

<style>.video-js.vjs-current-time { display: block; }
    .video-js.vjs-time-divider { display: block; }
    .video-js.vjs-duration { display: block; }
</style>

See: https://github.com/videojs/video.js/issues/2507