"Embed Iframe vidéo responsive" dans Moodle

"Embed Iframe vidéo responsive" dans Moodle

par Daniel Hazebroucq,
Nombre de réponses : 5

Bonjour,

Certains d'entre nous ont été confrontés à la non responsivité des vidéos déposées via des iframes dans Moodle.

Avec un de mes collègues, féru de html, et grand manipulateur de css, nous avons mis en place 2 petits bouts de code permettant d'ajouter cette responsivité à ces Iframes.

Nous somme en Moodle 2.8 avec un thème Clean légèrement customisé, mais je suppose que  cela peut fonctionner sur d'autres thèmes (non testé).

- Dans le réglage du thème Clean (administration - Présentation - thèmes - Clean) on ajoute le code suivant dans l'onglet " CSS personnalisé ":

 " .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } "

Dan l'entête de l'iframe, on ajoute cette div:
<div class="embed-container">ICI VOTRE IFRAME</div>

Votre iframe s'ajuste automatiquement à la taille de la fenêtre.

L'adaptation a été testée et validée avec des embed vidéo Viméo, dailymotion, vidéo avec player html5, youtube, Gyphy et l'embed Google maps.

Bonne journée

Daniel et Raphael

Lille 3


Moyenne des évaluations Utile (3)
En réponse à Daniel Hazebroucq

Re: "Embed Iframe vidéo responsive" dans Moodle

par raphael lecerf,

Il est possible de mettre les embeds iframe de Youtube ou Vimeo au format responsive dans vos page grâce au CSS , ceci est très pratique pour vos pages web ou sites compatible mobile.


+ d'infos :  http://perso.univ-lille3.fr/~rlecerf/index.php?responsive-sur-une-video-vimeo-ou-youtube.html

En réponse à raphael lecerf

Re: "Embed Iframe vidéo responsive" dans Moodle

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Bonjour,

Pour prolonger ces suggestions...

Serait-il possible d'obtenir aussi une adaptation automatique à la taille des fenêtres pour des vidéos déposées de manière standard dans Moodle ?

Soit directement dans le cours, soit par alias.

Ce mode de dépose standard ne permet pas de choisir la taille de la vidéo. A plus forte raison son adaptation automatique à la fenêtre de visionnage.

Ce serait une belle avancée en effet.

Daniel

En réponse à Daniel Méthot

Re: "Embed Iframe vidéo responsive" dans Moodle

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Bonjour,

Testé sur thème Archaïus (celui que j'utilise pour mes cours) .... OK !

Daniel

En réponse à Daniel Méthot

Re: "Embed Iframe vidéo responsive" dans Moodle

par raphael lecerf,

Rebonjour,

Bonnes nouvelles

De plus de notre côté dans nos cours, nous utilisons des vidéos hébergées par la plateforme VIMEO, et leurs iframes ne sont pas "responsive" de base.

C'est un problème qui devrait être résolu dans les prochains mois avec l'arrivée de l'utilisation de plus en plus fréquentes de tablettes et de téléphones Mobiles.

Bonne journée

Raphaël Lecerf

En réponse à Daniel Méthot

Re: "Embed Iframe vidéo responsive" dans Moodle

par raphael lecerf,

Bonjour,

J'ai eu quelques retours utilisateurs qui me disent que la vidéo est trop large par rapport au contenu disponible dans le cours.

rien plus simple, il suffit alors de modifier le CSS.

padding-bottom: 45%

max-width: 80%

" .embed-container { position: relative; padding-bottom: 45%; height: 0; overflow: hidden; max-width: 80%; }
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } "

Ce qui permet d'avoir la vidéo un peu moins large tout en gardant les proportions. Cette modification peut être très utile si les vidéos intégrées sont en résolution faible en dessous de HD720.

Raphael Lecerf (Pôle Pédagogique Dune de Lille 3)
Développeur Multimédia à l'Université Lille 3
Twitter : #LecerfRaphael
service : https://www.univ-lille3.fr/universite/fonctionnement/services/dune/
site perso :http://perso.univ-lille3.fr/~rlecerf/