Les vidéos intégrées en collant l’URL Vimeo présentent trop d’espace blanc au-dessus et en dessous de la vidéo intégrée sur un appareil mobile.
Vérifiez ces URL sur mobile pour reproduire le problème :
https://try.discourse.org/t/testing-video-embeds/1369
Captures d’écran :
Ce qui se passe ici, c’est que notre balise iframe a une largeur et une hauteur statiques, tandis que la vidéo intégrée de Vimeo s’adapte à 100 % de la largeur avec une hauteur automatique.
Cela se produit également avec d’autres vidéos intégrées dans des oneboxes dès que vous lancez la lecture, mais elles anticipent les variations de taille, utilisent donc tout l’espace du conteneur et appliquent un fond noir.
Voici un exemple avec Dailymotion :
Je pense que la solution la plus simple serait d’attribuer un fond noir à l’iframe de Vimeo ? Cela donnerait ceci :
Nous avons besoin d’une hauteur statique, sinon la mise en page tremblerait pendant le chargement de la page… Je ne sais pas si nous pouvons ou devrions faire quelque chose de plus élaboré, comme déterminer le ratio d’aspect et ajuster les dimensions pour les petits écrans (@techAPJ) ?
Ouais, on va rester sur le fond noir pour l’instant.
La même chose arrive avec Streamable.
