Comment rendre toutes vos vidéos Youtube « responsive » dans WordPress?

Article mise à jour le: 28 août 2016

Prenez un instant avant de commencer la lecture (merci!) pour découvrir mon nouveau projet: Vous êtes une PME et souhaitez analyser vos données commerciales, sans investir beaucoup ni embaucher un data scientist? DataInsightOut est fait pour vous! Venez en apprendre plus sur le site et consulter le blog.

Commencer l'analyse de données

Les vidéos intégrées sur votre site internet WordPress ne sont pas par défaut responsive, c’est à dire adaptables aux formats des différents supports de visualisation. Voici comment faire en sorte que celles-ci soient automatiquement rendues responsive.

 

picto-responsive

Deux scripts à copier coller

Pour rendre responsive toutes vos vidéos Youtube, voici deux simples scripts trouvés sur le net qui une fois combinés permettent de transformer les vidéos au bon format: mobile, tablette ou desktop. Ces scripts vont permettre de rendre toutes les vidéos, celles déjà publiées et celles futures, via des balises iframe, et cela, sans avoir à modifier manuellement chacun de vos posts ou à réaliser des opérations compliquées.

Voici un premier bout de code trouvé sur ce site. Il s’agit du code CSS nécessaire à rendre les vidéos youtube responsive. Ce code est directement à coller dans le fichier style.css de votre thème WordPress. 

.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%;
}

L’autre code, trouvé sur ce site, est à copier coller directement dans votre fichier functions.php. Il permet d’appliquer un filtre WordPress permettant de retailler vos vidéos intégrées via des iframe ou des documents utilisant la balise embed. Vous noterez au passage que la classe css video-container est appelée directement dans la balise div.

function div_wrapper($content) {
 // match any iframes
 $pattern = '~<iframe.*</iframe>|<embed.*</embed>~';
 preg_match_all($pattern, $content, $matches);

 foreach ($matches[0] as $match) {
 // wrap matched iframe with div
 $wrappedframe = '<div class="video-container">' . $match . '</div>';

 //replace original iframe with new in content
 $content = str_replace($match, $wrappedframe, $content);
 }

 return $content; 
}
add_filter('the_content', 'div_wrapper');

Une fois les modifications effectuées et sauvegardées sur votre serveur, vous pouvez consulter votre site internet via votre smartphone, actualiser la page et voir les changements: vos vidéos intégrées via iframe seront désormais responsive !

Cliquez, partagez!

Le coin des achats professionnels