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

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 !

Étiqueté , ,

Vous souhaitez obtenir une Base de données B2B pour votre prospection commerciale? Remplissez le formulaire suivant pour obtenir un devis:

Vous êtes une marque? Une entreprise? Publiez un article sponsorisé sur reportingbusiness.fr et touchez plusieurs milliers de lecteurs! Envoyez un mail pour en savoir plus!

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *