Bootstrap video pages displaying incorrectly in IE

The video page type in Bootstrap template is not displaying correctly when viewed in Internet Explorer 11. For some reason the video is displayed at full size, rather than responsively.

Here is an example: xerte.cardiff.ac.uk/play_5974 (see the "Finding Your Library" section on the first page)

And another annoying bug across all browsers it the media player progress bar. If you happen to run your mouse over the progress bar you'll notice that a timer label still appears and follows your mouse movements even when you're no longer hovering over the player. Also, when using the audio page type, the player volume control appears outside of the player in Chrome.

In general, the MediaElements players used in Bootstrap (or perhaps just their implementation) are really bad - they look very unprofessional and seem to be a step backwards from using just the basic browser-specific HTML5 video or audio players.

That resource looks really great.
We will look into the media element issues described. I hadn't noticed the issue with the label before. From what I've seen there you're more than capable of using the native players if you want to.

Julian

Just a quick note to say I think the audio player issue with the volume control has crept in with a recent Chrome update. I don't think that's been a problem previously.

e.g. you can see it in the Bootstrap demonstrator too which has been around for years and we would have noticed that before now www.nottingham.ac.uk/toolkits/play_8222#page1section5

As a temporary fix for that try: I think the default is 60px

Sorry scrub that it doesn't work that way.
As a hack you could change the time-rail width but you'd need to put different sizes for different device widths for it to work reliably.