Mobile Menu

Des vidéos responsive sur WordPress avec Advanced Responsive Video Embedder

29 / 02 / 2016
WordPress

Nyan Cat Mobile

Depuis la version 2.9 de WordPress, il est possible d’intégrer très facilement des vidéos externes dans ses pages ou articles sans avoir besoin d’installer une extension spécifique. Il suffit pour cela de coller le lien de la vidéo « en dur » dans le contenu, sans utiliser de balise particulière.

Pour plus d’informations sur cette fonctionnalité, ainsi que la liste complète des services pris en charge, vous pouvez consulter le Codex WordPress.

Adapter ses vidéos à la largeur du navigateur

Si vous faites le test sur votre site, vous constaterez toutefois qu’il y a un problème de responsive sur mobile : la vidéo dépasse probablement sur le côté droit de votre navigateur et apparaît coupée. Si vous êtes sur un écran d’ordinateur, vous remarquerez que la vidéo possède une largeur fixe. Elle ne prend pas 100 % de la zone de contenu, et ne s’adapte pas si vous réduisez la largeur de la fenêtre.

En attendant que ce problème soit corrigé dans une version future de WordPress, vous pouvez utiliser une extension pour rendre vos vidéos responsive sans aucun effort : Advanced Responsive Video Embedder.

Bien que cette extension dispose de quelques réglages appréciables (comme la gestion de la lecture automatique ou la définition d’une largeur maximale), vous n’aurez probablement qu’à l’installer et l’activer pour qu’elle soit effective sur vos vidéos.

Vous pouvez voir le résultat sur cette vidéo YouTube (essayez de redimensionner la fenêtre, ou de pivoter votre appareil si vous êtes sur mobile) :

Dans le contenu de l’article, nous avons simplement collé l’URL de la vidéo, il n’y a rien d’autre à faire. On peut difficilement faire plus simple. Vous l’aurez compris, Advanced Responsive Video Embedder est un must have si vous souhaitez rendre votre site entièrement responsive !

Source image : Flickr