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.
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 !
