Rendre un vidéo responsive, ou une iframe de manière générale, n’est pas très compliqué avec quelques lignes de CSS. Le problème c’est que les vidéos Youtube et autres Vimeo sont depuis quelques années maintenant toute au format 16/9 (ou proche).

Lorsque vous vous contentez de mettre un width à 100% sur une iframe (oui, les players sont appelés via des iframes), vous rendez simplement la largeur du player fluide, mais vous n’impactez pas sa hauteur. De fait, vous vous retrouvez avec un player très allongé (haut) ou étirée (largeur), mais une vidéo toute petite au centre.

rendre-les-videos-youtube-169-responsives-dans-wordpress-bweb-1
Ecran étroit, vidéo trop haute.
rendre-les-videos-youtube-169-responsives-dans-wordpress-bweb-2
Ecran large, vidéo pas assez haute.

 

La solution est pourtant assez simple puisqu’il suffit de s’appuyer sur les hook (filtres et actions) mis à disposition par le cœur de WordPress. Nous allons ici le hook embed_oembed_html qui gère le HTML généré pour afficher automatiquement les vidéos dans nos contenus. Il vous suffit de coller le code suivant dans votre fichier functions.php (celui de votre thème enfant 🙂 ).

// Responsive 16/9 videos
function bweb_custom_oembed_filter( $html, $url, $attr, $post_ID ) {
    $return = '<div class="video-container">' . $html . '</div>';
    return $return;
}
add_filter( 'embed_oembed_html', 'bweb_custom_oembed_filter', 10, 4 ) ;

Ajoutez ensuite ces quelques lignes de CSS à votre feuille de style (toujours dans votre thème enfant…)

.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	margin-bottom: 20px;
	height: 0;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Notez que c’est le padding ci-dessous qui permet de gérer le format d’affichage souhaité (aspect ratio).

C’est tout, vous aurez maintenant des vidéos parfaitement responsives et non fluides, et surtout en 16/9. Vous l’aurez compris, cette technique ne fonctionne pas qu’avez Youtube, mais bien avec toutes les iframes générées via oEmbed. Il faudra donc potentiellement mettre dans le code pour ajuster les autres cas possibles, mais vous avez le lien vers la doc 😉

Voici ce que ça donne

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

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