Reportingbusiness.fr
le site des cadres connectés: analyses, conseils et shopping

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

Étiquettes : , ,

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 !

Découvrez les derniers sites produits par reportingbusiness.fr, un site entièrement dédié aux fournitures professionnelles pour les pro, un site dédié aux produits techno et geeks, un site consacré à la mode et à la maison.

Découvrez aussi les prestations business en matière d'analyse de données.

Pensez à partager avec votre réseau !

Recevez une fois par semaine la newsletter et ne ratez plus aucun article. Vous pouvez vous désabonner à tout moment.



Vos commentaires

Be nice. Keep it clean. No spam.