Rendre une vidéo Youtube Responsive sous WordPress

Principe du site web Adaptif ou Responsive

Bonjour chers lecteurs!

Nous sommes tous conscients aujourd’hui de l’importance de rendre tous nos sites Adaptifs, à savoir, (anglais RWD pour responsive web design, conception de sites web adaptatifs selon l’OQLF). C’est une notion de développement de sites web qui regroupe différents principes et technologies dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation. L’utilisateur peut ainsi consulter le même site web à travers une large gamme d’appareils (moniteurs d’ordinateur, smartphones, tablettes, TV, etc.) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui peuvent parfois dégrader l’expérience utilisateur.

Image illustrant le principe du responsive design.

De plus, Google l’a fait comprendre à maintes reprises et officiellement de la primordialité de rendre son site mobile friendly !

Rendre les vidéos YouTube responsive sous WordPress

Insérer ce bout de code dans votre feuille de 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%;
}

Maintenant, quand vous intégrez une vidéo, ajoutez la balise div tag avec class .video-container. 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>

Voici une page de démo

Dans le titre de cet article j’ai de mentionné « vidéos Youtube  » mais en fait vous pouvez utilisez ce code sur des :  » embeds  » tels que Vimeo Video embeds,Slideshare etc.

Si vous préférez plutôt les plugins que de modifier le thème vous pouvez utilisez :

Advanced Responsive Video Embedder or Fluid Video Embeds