Les vidéos ne prennent pas par défaut la totalité de la largeur des conteneurs sur WordPress. Afin que cela soit simple pour les utilisateurs il suffit d’utiliser JQuery.
L’intérêt est d’ajouter un bloc div parent pour appliquer sur l’iframe le principe du responsive.
Ajouter la librairie Jquery 1.5.2
Ajouter le script en header.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
Ajouter le css pour rendre les iframe WordPress responsive
.parent-frame{
position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;
}
iframe{
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
Ajout du script
Ce bou de code détecte toutes les iframes afin d’y ajouter la div avec la classe parent-frame.
<script>
$(function ()
{
$('iframe').wrap('<div class="parent-frame"></div>');
});
</script>
<?php endif; ?>
Et c’est finit !