Le Blog

Le blog laboratoire de F.L.D. Studio
0

ProcessWire Vidéo Adaptative

Nouvelle fonctionnalité JavaScript

C'est le début de l'année, une bonne résolution pour ce blog était de rendre les vidéos embarquées "responsives". C'est chose faite !!! En intégrant dans le fichier main.js, la librairie JavaScript FLUIDVID.JS et la fonction qui l'utilise  (http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/ ) et en recodant le HTML des posts contenant des vidéos Youtube, cela fonctionne parfaitement, les vidéos conservent une proportions 16:9 dans toutes les résolutions d'écran. Merci à Todd Motto pour sa solution pure JS (Jquery Free !)

Cette fonction permet d'analyser les balises <iframe> de la page, de tester qu'il s'agit des plateformes Youtube ou Viméo et de les enfermer dans  une <div class="fluid-vids"></div> avec un  style inline placée à la volée dessus.

Le style

        element.style { padding-top: 56.25%; position: relative; width: 100%; }
    

La librairie à aussi été modifiée pour accepter les vidéos sur Dailymotion.

Pour que cela fonctionne avec le module blog de ProcessWire il faut s'assurer que l'éditeur WYSING accepte la balise <iframe> en mode HTML et placer simplement le code fournit par les plateformes pour le partage embarquée des vidéos.

1.Editeur WYSING TinyMCE

Le champ Body doit être configuré ( voir : ici ) pour accepter le mot : iframe et toutes les options.

2.Exemples de code à placer dans l'éditeur HTML (fournit par les plateformes vidéos)

Code à recopier

En noir gras l'adresse URL de la vidéo

Youtube
    <iframe src="http://www.youtube.com/embed/
    
        JMl8cQjBfqk
    
    " frameborder="0" width="560" height="315"></iframe>
Viméo
    <iframe src="http://player.vimeo.com/video/
    
        23919731
    
    " width="500" height="281" frameborder="0"></iframe>

Solution en CSS

Une autre solution basée sur du CSS peut-être trouvée ici ( http://www.lije-creative.com/creer-video-responsive/ ) mais il faut avoir la main sur les balises vidéo pour ajouter une <div> avant la balise <iframe>, ce qui n'est pas le cas avec 'un champ crée par un utilisateur et son éditeur WISING ou non, à moins de transformer le code HTML à la volée. L'avantage c'est qu'il est possible aussi de gérer les vidéo embarquées avec Flash.

Tutoriel de Grafikart sur les vidéos Responsive en CSS

Catégories: Développement WEB, Processwire, Vidéo

Commentaires: Pas de commentaires

Envoyer un commentaire