[Résolu] problèmes avec lecteur video

Général
1

Bonjour

Dans un article, je mets une vidéo avec le raccourci <doc1224|center>

Dans l’espace privé, pas de souci, la video est dans un bloc de 640px par 368px.
Mais dans l’espace public, j’ai 2 soucis :

  • la video n’est pas centrée
  • la hauteur du layer est trop grande (671.6px au lieu de 368px)

Je n’arrive pas à trouver d’où cela peut venir.
L’article en question se trouve ici test video si quelqu’un a le temps et l’envie d’y regarder de plus près.

2

Je viens de tester sur une 4.4 sans squelette spécifique et le player est affiché avec la bonne taille bien centré.

3

pour le centrage, j’ai pu y remédier avec

.video-intrinsic-wrapper {
    margin: 0 auto;
}

pour la hauteur, je cherche.
Je suis avec le plugin escal mais je n’arrive pas à trouver la ou les règles css qui provoquent cet affichage.

4

Je me suis fait aidé par une IA qui m’a proposé de rajouter ce js

document.querySelectorAll('.video-intrinsic-wrapper').forEach(function(el) {
    var pb = parseFloat(el.style.paddingBottom);
    if (pb) {
        el.style.paddingBottom = '0';
        el.style.height = 'auto';
        el.style.aspectRatio = '100 / ' + pb;
    }
});

qui, en effet, corrige le problème.

5

je précise que le problème n’apparait que si largeur de la page est supérieure à la largeur de la vidéo.

Le problème venait du fait que padding-bottom en pourcentage CSS se calcule sur la largeur du parent, pas sur la largeur de l’élément lui-même — ce qui donnait une hauteur fausse dès que le conteneur parent était plus large que le wrapper vidéo. aspect-ratio corrige ça proprement.