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.

code css à ajouter:

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

Code PHP à ajouter dans le fichier function.php :
// Responsive 16/9 videos
function bweb_custom_oembed_filter( $html, $url, $attr, $post_ID ) {
$return = '

';
return $return;
}
add_filter( 'embed_oembed_html', 'bweb_custom_oembed_filter', 10, 4 );