Pour l’un des sites que j’ai créés, j’ai eu à intégrer des vidéos YouTube dans l’une des sidebars de la page d’accueil.

Jusqu’ici, je m’étais cantonnée à un simple copier/coller du code iframe d’une vidéo directement dans un article, mais impossible de procéder de cette manière dans une sidebar limitée à 300px sur un ordinateur, beaucoup moins sur tablette.

Ni une ni deux, Google. La plupart des sites proposent d’installer un plugin supplémentaire, mais cela ne fait qu’augmenter le nombre de scripts et j’ai tendance à les éviter (quand je peux, je ne suis pas non plus développeuse).

Heureusement, plusieurs tutoriels vraiment bien faits permettent d’ajouter des bouts de code css et html pour que votre intégration YouTube soit vraiment responsive.

Rendre les vidéos YouTube responsive avec WordPress

(source: http://www.wpstuffs.com/youtube-videos-responsive-wordpress/)

Etape 1: copiez ce code dans votre feuille de style (style.css)

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

.entry-content img, .entry-content iframe, .entry-content object, .entry-content embed { max-width: 100%; }

Etape 2: ajoutez ces bouts de code à chaque intégration YouTube

<div> 
<iframe width="560" height="315" src="http://www.youtube.com/embed/exempledevideoyoutube" frameborder="0" allowfullscreen></iframe> 
</div>

Et voilà, vous n’avez plus qu’à tester le résultat sur iPad : la taille de la vidéo s’ajuste à votre écran !

Vous préférez utiliser un plugin? 

Cela tombe bien, il existe d’excellentes extensions pour gérer vos vidéos YouTube sous WordPress (de manière responsive, entre autres fonctionnalités):

  • YouTube WordPress plugin – vidéo import 

Pour seulement 22 dollars, vous gagnerez un temps fou dans la gestion de vos vidéos (et de celles d’autres playlists d’utilisateurs, si vous souhaitez les utiliser dans vos posts)

Infos et démo 

  • WordPress Responsive YouTube Playlist Video Player

Moins cher (16 dollars seulement) mais tout aussi convaincant, le WP Responsive YouTube Playlist Video Player vous permet de choisir la manière dont vous insérez vos players. Bien entendu, il est entièrement responsive et bénéficie d’une note de 5/5 par ses utilisateurs.

Infos et démo  

astuce trouvée sur www.wpstuffs.com

Last Updated on