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

Video styles in Bootstrap

  • Neil Pollock
  • Auteur du sujet
  • Hors Ligne
  • Membre premium
  • Membre premium
Plus d'informations
il y a 9 ans 3 semaines #4599 par Neil Pollock
Video styles in Bootstrap a été créé par 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?

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 9 ans 3 semaines #4600 par Fay
Réponse de Fay sur le sujet 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

Connexion ou Créer un compte pour participer à la conversation.

  • Neil Pollock
  • Auteur du sujet
  • Hors Ligne
  • Membre premium
  • Membre premium
Plus d'informations
il y a 9 ans 2 semaines #4611 par Neil Pollock
Réponse de Neil Pollock sur le sujet 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>

Connexion ou Créer un compte pour participer à la conversation.

  • Neil Pollock
  • Auteur du sujet
  • Hors Ligne
  • Membre premium
  • Membre premium
Plus d'informations
il y a 8 ans 10 mois #4682 par Neil Pollock
Réponse de Neil Pollock sur le sujet 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).

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 8 ans 10 mois #4685 par Fay
Réponse de Fay sur le sujet 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.
Les utilisateur(s) suivant ont remercié: Neil Pollock

Connexion ou Créer un compte pour participer à la conversation.

  • Neil Pollock
  • Auteur du sujet
  • Hors Ligne
  • Membre premium
  • Membre premium
Plus d'informations
il y a 8 ans 8 mois #4836 par Neil Pollock
Réponse de Neil Pollock sur le sujet 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

Connexion ou Créer un compte pour participer à la conversation.

Modérateurs: JohnSmith
Temps de génération de la page : 0.142 secondes
Main Pages
Quick Links
Support
External resources
Copyright © 2026 The Xerte Project.
Xerte logo Apereo logo OSI Logo