Bonjour,

je rencontre un problème d'intégration de vidéo sur la plateforme pédagogique Moodle

Avec le code suivant :

<iframe src="https://webtv.univ-xxx.fr/videos/?video=MEDIA160118102859503" scrolling="no" marginwidth="0" marginheight="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0" height="100%" width="100%"></iframe>

La largeur de la vidéo s'adapte bien à la largeur dispo dans l'interface.

En revanche, la hauteur se régle sur 150px et la vidéo est donc soit coupé dans la hauteur, soit du noir apparait si la vidéo est plus petite.

Est-ce que quelqu'un a une idée du problème ?

Merci d'avance

-
Edité par lj1982 18 janvier 2016 à 12:04:27

Bonjour,

les valeurs "100%" ne sont pas valides pour height et width. C'est en CSS que width: 100% doit être mis. En revanche, pour la hauteur, c'est une autre paire de manches : une hauteur en pourcentages sur un élément correspond à une fraction de la hauteur de son parent direct. Si ce parent n'a pas de hauteur explicitement précisée, c'est "0". Il faudrait donc préciser une hauteur sur tous les éléments jusqu'à html, et c'est rarement une bonne idée. Pour mieux avancer, peux-tu nous donner plus d'infos, notamment sur le code de la plateforme en question ?

Merci,

quelles types d'infos je peux donner précisément sur le code ?

Je peux faire un copier-collé du code source de la page (en enlevant les infos confidentielles).

Sinon, la plateforme est moodle :

https://fr.wikipedia.org/wiki/Moodle

Salut,

Une solution possible :

<div class="video">
	<iframe src="https://webtv.univ-xxx.fr/videos/?video=MEDIA160118102859503" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe>
</div>

.video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

-
Edité par EmmanuelBeziat 18 janvier 2016 à 12:46:22

Ah, bien vu rhooManu ! Note importante cependant : il faut être sûr⋅e que le ratio de la vidéo soit bien de 16:9.

Bonjour,

merci pour cette solution qui fonctionne pour ma vidéo.

Ceci-dit, à quoi sert le padding-top ?

J'ai du le mettre à 0 car cela générait une bande noire de 25px sous le player.

Et comme j'aime comprendre : sur quoi se base la padding-bottom ? C'est 56,25% de largeur de la div ?

Enfin, si je veux appliquer ce code à toutes les publications, cela risque en effet de poser problème sur d'éventuelle videos en 4/3. A creuser.  Je ne sais pas non plus ce que cela donne sur d'autres videos (Youtube, dailymotion entre autre).

Le padding sert à donner une hauteur à la div, relative à sa largeur. C'est pour conserver un ratio fixe même si la largeur change. 56,25%, ça fait un ratio "courant" de vidéo (HD), donc adapté pour YouTube, Dailymotion, Vimeo…

En fait, pour être plus précise encore, 56.25% c'est 9/16 (neuf divisé par seize) (ce qui correspond donc à ce qu'on appelle le 16/9 ou "seize neuvième").

-
Edité par Lamecarlate 20 janvier 2016 à 6:37:58

Merci de vos réponses.

J'ai bien compris pour le padding-bottom de 56,25% qui donne le ration 16:09 à la video.

Mais pourquoi un padding-top de 25px ? A moins que ce soit pour un player avec une entête de 25 px ?

À priori, c'est pour YouTube, mais je n'ai pas trouvé d'explications plus précises.

Ok merci. Je ferais un test avec Youtube également, ça peut servir.

Bonjour, pouvez-vous m'aider à ajouter une condition a ce code. J'aimerai que sur mobile ce soit responsive, donc 100% mais pas sur ordi, sinon la vidéo est énorme. j'aimerai une taille de 560x315 sur les écrans en dessus de 600px.

Merci d'avance,

Pauline

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.