The place for more technical questions for those who want to create new pagetypes or bespoke functionality.

Video styles in Bootstrap

  • Neil Pollock
  • Onderwerp Auteur
  • Offline
  • Premium lid
  • Premium lid
Meer
9 jaren 1 maand geleden #4599 door Neil Pollock
Video styles in Bootstrap werd gestart door Neil Pollock
I'm trying to apply my own video styles in a Bootstrap template, but for some reason this template inserts a whole load of code (mejs-container, mejs-inner, mejs-mediaelement etc.) which overrides what I want to do.

Here is an example of what I'm trying to do, in a XOT object (see page 3 and onwards): xerte.cardiff.ac.uk/play_4089

Here is what it looks like in Bootstrap: xerte.cardiff.ac.uk/play_4414

How can I stop all of these mejs classes from being applied?

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Meer
9 jaren 1 maand geleden #4600 door Fay
Beantwoord door Fay in topic Video styles in Bootstrap
The XOT & Bootstrap templates both use mediaelement.js to play videos ( www.mediaelementjs.com/ ) so that's where all the extra divs etc are coming from.

I'm not sure why what you've used to get around this in the XOT template hasn't worked in the bootstrap one though. Could you just identify all the bits from mediaelement that you don't want and hide them?

Fay

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

  • Neil Pollock
  • Onderwerp Auteur
  • Offline
  • Premium lid
  • Premium lid
Meer
9 jaren 4 weken geleden #4611 door Neil Pollock
Beantwoord door Neil Pollock in topic Video styles in Bootstrap
With the amount of code that gets added and modified by mediaelements.js I don't think it would be possible to simply hide the bits I don't want.

For example, this code:
Code:
<video> <source src="https://xerte.cardiff.ac.uk/USER-FILES/5974-sisnp2-site/media/finding_your_library.mp4" /> </video>

Becomes this:
Code:
<div class="mejs-container mejs-video" id="mep_1" style="width: 1024px; height: 768px;"> <div class="mejs-inner"> <div class="mejs-mediaelement"> <video height="768" src="https://xerte.cardiff.ac.uk/USER-FILES/5974-sisnp2-site/media/finding_your_library.mp4" width="1024"><source src="https://xerte.cardiff.ac.uk/USER-FILES/5974-sisnp2-site/media/finding_your_library.mp4"></video> </div> <div class="mejs-layers"> <div class="mejs-poster mejs-layer" style="display: none; width: 1024px; height: 768px;"></div> <div class="mejs-overlay mejs-layer" style="width: 1024px; height: 768px; display: none;"> <div class="mejs-overlay-loading"> <span></span> </div> </div> <div class="mejs-overlay mejs-layer" style="display: none; width: 1024px; height: 768px;"> <div class="mejs-overlay-error"></div> </div> <div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: 1024px; height: 768px;"> <div class="mejs-overlay-button"></div> </div> </div> <div class="mejs-controls" style="display: block; visibility: hidden;"> <div class="mejs-button mejs-playpause-button mejs-play"> <button aria-controls="mep_1" title="Play/Pause" type="button"></button> </div> <div class="mejs-time mejs-currenttime-container"> <span class="mejs-currenttime">00:00</span> </div> <div class="mejs-time-rail" style="width: 875px;"> <span class="mejs-time-total" style="width: 865px;"><span class="mejs-time-buffering" style="display: none;"></span><span class="mejs-time-loaded" style="width: 525.504px;"></span><span class="mejs-time-current" style="width: 0px;"></span><span class="mejs-time-handle" style="left: -7px;"></span><span class="mejs-time-float"><span class="mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span></span> </div> <div class="mejs-time mejs-duration-container"> <span class="mejs-duration">00:26</span> </div> <div class="mejs-button mejs-volume-button mejs-mute"> <button aria-controls="mep_1" title="Mute Toggle" type="button"></button> <div class="mejs-volume-slider"> <div class="mejs-volume-total"></div> <div class="mejs-volume-current" style="height: 80px; top: 20px;"></div> <div class="mejs-volume-handle" style="top: 17px;"></div> </div> </div> <div class="mejs-button mejs-fullscreen-button"> <button aria-controls="mep_1" title="Fullscreen" type="button"></button> </div> </div> <div class="mejs-clear"></div> </div> </div>

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

  • Neil Pollock
  • Onderwerp Auteur
  • Offline
  • Premium lid
  • Premium lid
Meer
8 jaren 10 maanden geleden #4682 door Neil Pollock
Beantwoord door Neil Pollock in topic Video styles in Bootstrap
Does anyone have a possible fix for this?

I have a fairly urgent need to use the <video> and <audio> tags in a Bootstrap project, but don't want these converted to the Media Elements player (as seems to be happening at the moment).

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Meer
8 jaren 10 maanden geleden #4685 door Fay
Beantwoord door Fay in topic Video styles in Bootstrap
It looks like there's a function in the template that forces all audio & video tags to use the mediaelement player. You can override this by including the Script optional property with this in it:
Code:
function initMedia(){}

I just see the browser's default player when I add this.
De volgende gebruiker (s) zei dank u: Neil Pollock

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

  • Neil Pollock
  • Onderwerp Auteur
  • Offline
  • Premium lid
  • Premium lid
Meer
8 jaren 8 maanden geleden #4836 door Neil Pollock
Beantwoord door Neil Pollock in topic Video styles in Bootstrap
Forgot to say thanks for this fix.

If you're interested, the fix was needed for all of the audio players on the "Talks" page in this resource: xerte.cardiff.ac.uk/play_5767

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Moderators: JohnSmith
Tijd voor maken pagina: 0.142 seconden
Main Pages
Quick Links
Support
External resources
Copyright © 2026 The Xerte Project.
Xerte logo Apereo logo OSI Logo