WordPress : Vidéo Youtube responsive

L’heure est au responsive design, mais il n’est pas toujours facile d’y arriver avec les vidéos YouTube.

Dernièrement, j’ai eu une mauvaise expérience avec la nouvelle mouture mise en place pour ce blogue, YouTube explosait mon design…

Pour ceux qui sourcille devant le terme  « responsive design », sachez que :

C’est une technique de réalisation de site web, qui permet de faire des sites qui s’adaptent automatiquement à l’espace disponible sur l’écran. source : Qu’est-ce que le Responsive Web Design ?

En résumé, votre site s’adapte harmonieusement bien aux différents supports sur lesquels votre site Web sera affiché tel que l’ordinateur de bureau, les tablettes et les téléphones intelligents.

Et si vous sourcillez encore, c’est que vous désirez une version française au terme.

Selon l’Office québécois de la langue française, le terme francophone pour responsive Web design est conception de sites web adaptatifs.

Vous voilà rassasié !

Je vais donc entrer dans le vif du sujet et revenir à mon histoire des vidéos YouTube en mode responsive.

Il n’y a rien de plus laid sur son mobile qu’un design explosé par une vidéo YouTube… Comment remédier à cela ?

Voici deux pistes de solution.

La première, un plugin !

Deux plugins que j’ai sélectionnés pour vous. Facile à utiliser :

  1. Responsive Video Embeds
  2. Advanced Responsive Video Embedder

La deuxième, un bras et une souris !

Pour cette autre option, il vous faut mettre la main à la pâte et ouvrir le capot du moteur CSS de votre thème Worpdress tel que partagé chez avexdesigns.

Mais attention, je vous suggère fortement d’éviter de modifier le fichier CSS de votre thème. Il vaut mieux passer par une autre voie, car dès que vous aurez fait une mise à jour de votre thème, toutes vos modifications vont être foutues.

Si vous avez installé le plugin Jetpack d’Automattic (créateur de WordPress), vous allez être en mesure d’ajouter facilement une autre feuille de style à votre thème sans pour autant l’annihiler dès le prochain update.

Une fois Jetpack installé, il vous faudra simplement aller dans APPARENCE / MODIFIER LE CSS et ajouter le code suivant :

À chaque fois que vous allez ajouter une vidéo YouTube, il vous faudra l’envelopper de la balise div et de la class video-container.

Exemple :

Voilà qui devrait vous aider.

ThemeForest

300x250_responsive

L’idéal est d’avoir un thème qui est responsive et qui, par défaut, gère ce genre de détail. Si vous cherchez des thèmes WordPress de qualités, ThemeForest est un puissant allier pour tout ce qui touche WordPress.

Les thèmes y sont professionnels et les designs vraiment magnifiques. De plus, vous ne serez jamais laissé seul avec votre thème. Les designers sont là pour répondre à vos questions et vous aider. Si vous cherchez à vous démarquer, c’est là-bas qu’il faut aller.

Source de l’image d’intro : screenmedia

4 commentaires On WordPress : Vidéo Youtube responsive

Laisser un message :

Votre adresse courriel ne sera pas publiée avec votre message. C'est confidentiel. :-)

Site Footer

Sliding Sidebar

Sur les réseaux…

Abonnez-vous par courriel

Saisissez votre adresse e-mail pour recevoir une notification pour chaque nouveau billet.

Hébergement wordPress par