Tout savoir sur WordPress
Tutoriel WordPress

Modifier la largeur et la hauteur des services utilisant l’API oEmbed

Depuis WordPress 3.5, on ne peut plus modifier les dimensions des services utilisant oEmbed à partir de l’administration. Découvrez comment modifier les dimensions à partir d’un filtre.

Depuis la version 3.5 de WordPress, il n’est plus possible de modifier les dimensions des services utilisant l’API oEmbed.

Pour rappel, oEmbed est une API qui permet, par exemple, de modifier automatiquement l’adresse URL d’une vidéo Youtube en lecteur vidéo. La liste des services supportés par oEmbed est disponible à l’adresse suivante :
http://codex.wordpress.org/Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F

Auparavant, on pouvait configurer à partir de l’administration (Réglages -> Médias) la largeur et la hauteur maximale d’affichage des services afin de les adapter à notre thème.

Administration de la largeur maximale de l'API oEmbed sur WordPress 3.4.2
Administration de la largeur maximale de l’API oEmbed sur WordPress 3.4.2

Pour modifier la largeur et la hauteur des services utilisant l’API oEmbed à partir de WordPress 3.5, il faut insérer le code-ci dessous dans le fichier functions.php présent à racine de votre thème :

add_filter('embed_defaults', 'gkp_oembed_defaults');
function gkp_oembed_defaults($embed_size) {

    // /! Adaptez les dimensions en fonction de votre besoin !

    $embed_size['width'] = 940;
    $embed_size['height'] = 600;

    return $embed_size;
}

Pour aller plus loin, on peut modifier les dimensions en fonction de notre localisation comme dans l’exemple ci-dessous :
add_filter('embed_defaults', 'gkp_oembed_defaults');
function gkp_oembed_defaults( $embed_size ) {

    if( is_front_page() || is_home() ) {
       $embed_size['width'] = 940;
       $embed_size['height'] = 600;
    }
   else {
       $embed_size['width'] = 600;
       $embed_size['height'] = 340;
   }
   return $embed_size;
}

Cet article a été mis à jour il y a 2036 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

8 Commentaires

  1. Pourquoi faire simple quand on peut faire compliqué.

    Au lieu d’ajouter du code php, suffit de rajouter à notre feuille css les dimensions souhaitées pour les vidéos youtube

  2. J’ai un blog sous WP en préparation, et j’y mettrai pas mal de vidéos, je pense que cette astuce va me servir très rapidement :-)

  3. @Djib’s : Oui et non. Ce n’est pas forcément une bonne pratique de modifier la largeur et la hauteur d’une iframe en css. C’est comme pour les images, il est fortement déconseillé de modifier les dimensions d’une image en CSS qui contient les attributs width et height.

    Et puis, 5 lignes de code à mettre dans le fichier functions.php, ce n’est pas sorcier =D

  4. Ah ouais, plus la peine de se casser la tête, je vais juste me contenter de copier de code du haut. j’avais moi aussi pensé à modifier mes feuilles de style, mais j’étais pas très à l’aise avec cette perspective…

  5. Merci je cherchais justement comment faire, du coup je vais modifier le code php comme tu as fais :)
    Par contre je me demande si c’est volontaire de la part de WordPress.

  6. J’ai pu tester pas mal de thème depuis que j’utilise WordPress, j’en vois qui adaptent automatiquement les dimensions des vidéos et images en fonctions de la largeur de ta page ou article, car dans le cas contraire en effet les images sont « débordantes ».

    Je me pose la question du coup de savoir si on ne pourrait pas adapter ton code de cette manière là ? C’est en aucune prétention car je ne suis que très rarement en train de modifier mes css, mais qu’en penses tu ? ça permettrai d’avoir une vidéo toujours en accord avec les thèmes utilisés !

  7. Personnellement, je renseigne `$content_width` dans le fichier functions.php et laisse le « provider » gérer le reste sur base de cette valeur.

    Point intéressant, cette variable agit aussi sur les tailles d’image disponible à l’insertion dans un `post`.

eget elit. Nullam ipsum justo consectetur