Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment définir le point terminaison oEmbed Max Width dans WordPress (4 méthodes faciles)

WordPress facilite la création de pages multimédias attrayantes en embarquant automatiquement des contenus tiers tels que des vidéos YouTube et des tweets.

Cependant, après avoir travaillé en étroite collaboration avec les utilisateurs/utilisatrices de WordPress au cours des 15 dernières années, nous avons appris que les points terminaison oEmbed peuvent également causer des problèmes. Imaginez une vidéo YouTube débordant de son conteneur et repoussant tout votre texte sur le côté, ou forçant votre bouton d’appel à l’action plus bas sur l’écran.

C’est là qu’intervient le fait de définir une largeur maximale pour les points terminaison oEmbed. Elle vous permet de prendre le contrôle et de vous assurer que votre contenu embarqué s’intègre parfaitement à la conception de votre site.

Dans cet article, nous allons vous afficher comment définir la largeur maximale de oEmbed dans WordPress afin que vous ayez un contrôle total sur la mise en page de votre site.

Setting oEmbed maximum width in WordPress

Pourquoi Corrigé les points terminaison oEmbed largeur maximale dans WordPress ?

WordPress supporte le point terminaison oEmbed, qui vous permet d’intégrer automatiquement du contenu provenant de sites tiers. Par exemple, vous pouvez facilement intégrer des vidéos YouTube, des présentations SlideShare, des tweets et bien d’autres types de contenu.

Ce contenu n’est pas hébergé sur votre serveur, il ne ralentira donc pas votre site. En particulier, vous devriez toujours utiliser des technologies telles que le point terminaison oEmbed, et ne jamais téléverser une vidéo sur WordPress.

Note : Bien que Facebook et Instagram aient tous deux pris en charge oEmbed dans le passé, Meta a depuis abandonné le support de oEmbed. Pour des instructions étape par étape sur la façon de réparer cette fonctionnalité, veuillez consulter notre guide sur la façon de corriger le point de terminaison oEmbed de Facebook et Instagram dans WordPress.

WordPress essaiera toujours d’ajuster la largeur du contenu embarqué pour qu’il s’adapte parfaitement à l’espace disponible. Cependant, il arrive que le contenu embarqué soit trop large et chevauche les autres zones de contenu de votre site.

A WordPress embed overflowing the content width

Malheureusement, vous ne pouvez pas définir une largeur maximale pour les contenus embarqués de tiers à l’aide des outils intégrés de WordPress.

Ceci étant dit, voyons comment vous pouvez ajouter cette fonctionnalité manquante et définir un point terminaison oEmbed maximum dans WordPress. Utilisez simplement les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser :

Méthode 1 : Utilisation du Contenu embarqué court (idéal pour les vidéos YouTube)

Vous pouvez définir une largeur maximale à l’aide d’un code court. Cette méthode est facile, en particulier si vous souhaitez uniquement définir la largeur maximale pour un petit nombre de publications. Nous avons également trouvé que cette méthode fonctionne bien pour Embarquer des vidéos dans les publications de blogs WordPress.

Cependant, le code court d’intégration et ses paramètres de largeur et de hauteur ne fonctionnent pas pour tous les fournisseurs de Contenu embarqué. Par exemple, vous ne pouvez pas l’utiliser pour définir la hauteur et la largeur d’un contenu embarqué Giphy dans WordPress. Dans ce cas, vous pouvez essayer l’une des autres méthodes mentionnées ci-dessous.

Au lieu de coller l’URL dans l’éditeur de la publication, vous devrez créer un bloc de codes courts. Vous pourrez ensuite ajouter les paramètres de largeur et de hauteur au code embarqué.

Par exemple, il vous suffit d’insérer les éléments suivants dans des balises d’identification ( embed):

width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues

Il suffit de modifier les valeurs de largeur et de hauteur en fonction de vos besoins et de remplacer l’URL par le contenu que vous souhaitez intégrer.

Embed shortcode width

Lorsque vous êtes satisfait de la page, il vous suffit de cliquer sur « Mettre à jour » ou « Publier ».

Le contenu embarqué devrait maintenant s’insérer parfaitement dans l’espace disponible.

oEmbed width adjusted

Méthode 2 : Utiliser les blocs de contenu embarqué de WordPress (facile)

L’éditeur de blocs WordPress est livré avec plusieurs blocs d’intégration pour différents services oEmbed, tels que des blocs pour Twitter, des livestreams et des vidéos YouTube, et des embeds SoundCloud.

Embed blocks in WordPress

Certains de ces blocs vous permettent de modifier l’alignement du Contenu embarqué et de définir le contenu comme étant de « grande largeur » ou de « pleine largeur ».

Si vous choisissez la pleine largeur, le bloc et le contenu embarqué prendront toute la largeur de l’écran. Si vous choisissez la largeur large, le bloc incorporé occupera toute la largeur de l’écran, mais le contenu restera de la même taille.

Le résultat final peut varier en fonction de votre thème WordPress. Cependant, il s’agit d’une méthode rapide et facile, cela vaut donc la peine de voir si elle fonctionne pour votre site WordPress.

Il suffit de cliquer sur le bouton « Aligner » dans la petite barre d’outils située au-dessus du bloc. Sélectionnez ensuite « Large » ou « Pleine largeur ».

Adding aligning to an embed block in WordPress

Si cela corrige le problème de la largeur maximale du Contenu embarqué, vous pouvez publier la page. Si vous n’êtes pas satisfait de l’aspect de la page, vous devrez essayer une autre méthode.

Méthode 3 : Outil de personnalisation PHP (Définir une largeur maximale pour tous les contenus embarqués)

Il peut arriver que vous souhaitiez définir une largeur maximale pour l’ensemble du contenu embarqué. La manière la plus simple de le faire est d’ajouter un code personnalisé à votre site WordPress.

Le problème avec cette méthode est que l’attribut de largeur maximale fonctionnera uniquement si le contenu embarqué n’a pas déjà un attribut « width » défini. Si le code embarqué comprend déjà son propre attribut « width », cette méthode risque de ne pas fonctionner.

Si vous n’avez jamais modifié le code de votre site, consultez notre guide sur la façon d’ajouter facilement des extraits de code personnalisés dans WordPress.

Certains guides vous demandent de modifier les fichiers du thème manuellement, mais cela peut provoquer toutes sortes d’erreurs, voire casser complètement votre site.

C’est pourquoi nous vous recommandons d’utiliser WPCode. Il facilite l’ajout d’extraits de code dans WordPress sans avoir à modifier les fichiers de votre thème. Ainsi, vous pouvez mettre à jour ou modifier votre thème sans perdre toutes les fonctions de votre code personnalisé.

WPCode est également livré avec une bibliothèque d’extraits de code préconfigurés, dont un extrait « Définir la largeur maximale de l’oEmbed ». Cela vous permet de spécifier une largeur et une hauteur maximales pour vos points terminaison oEmbed.

Tout d’abord, vous devrez installer et activer le plugin gratuit WPCode. Pour plus d’informations, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, naviguez vers Extraits de code «  Bibliothèque dans votre panneau d’administration WordPress.

The WPCode ready-made code snippets library

Ici, vous pouvez rechercher « Set oEmbed Max Width » et survoler avec votre souris le résultat nommé de la même manière.

Vous pouvez ensuite cliquer sur « Utiliser l’extrait ».

The ready-made oEmbed code, provided by the WPCode code snippets plugin

WPCode vous amènera ensuite à la page « Modifier l’extrait », où l’extension a déjà tout configuré pour vous.

Vous y trouverez la notification de l’extrait de code suivant, prêt à l’emploi :

function wpcode_snippet_oembed_defaults( $sizes ) {
	return array(
		'width'  => 400,
		'height' => 280,
	);
}

add_filter( 'embed_defaults', 'wpcode_snippet_oembed_defaults' );

Par défaut, cela définit la largeur maximale à « 400 » et la hauteur maximale à « 280 ». N’oubliez pas d’adapter les attributs de hauteur et de largeur à vos besoins.

Enfin, cliquez sur le Diaporama « Inactif » pour qu’il affiche « Actif ». Cliquez ensuite sur le bouton « Enregistrer l’extrait » ou « Mettre à jour » pour rendre l’extrait de code direct.

Activating a custom PHP snippet

Méthode 4 : Utilisation de CSS (Définir la largeur maximale pour des types de contenus embarqués spécifiques)

Par défaut, WordPress ajoute automatiquement des classes CSS à différentes zones de votre site.

Il ajoute également plusieurs classes CSS aux blocs embarqués. Vous pouvez utiliser ces classes CSS pour définir une largeur maximale pour les contenus embarqués sur votre blog WordPress.

C’est un bon choix si vous souhaitez définir une taille maximale pour un type d’incorporation spécifique, comme les Tweets embarqués. Il vous permet également de créer une taille maximale pour tous les contenus embarqués, quel que soit leur type.

Pour trouver les classes CSS que vous devez cibler, il suffit d’embarquer du contenu dans une publication ou une page, puis de le prévisualiser dans votre navigateur.

Survolez ensuite le contenu embarqué et cliquez avec le bouton droit de la souris. Dans le menu qui apparaît, sélectionnez l’outil « Inspecter ».

Chrome's inspect tool

Cela ouvre un nouveau panneau affichant toutes les classes CSS que WordPress a ajoutées au contenu embarqué. Vous pouvez utiliser ces classes pour définir une largeur maximale pour ce type de Contenu embarqué.

Pour cibler un point terminaison de points terminaison oEmbed, vous utiliserez généralement .wp-block-embed-providername, recherchez donc cette classe dans le tableau de bord.

Par exemple, dans l’image suivante, nous avons souligné la classe .wp-block-embed-providername. Sur cette ligne, on peut également voir une classe .wp-block-embed-pinterest.

Finding CSS classes for embed blocks

Vous pouvez définir une largeur maximale pour les contenus embarqués Pinterest uniquement à l’aide de la classe .wp-block-embed-pinterest.

Par exemple :

.wp-block-embed-pinterest {
    max-width: 900px!important;
}

Sachez simplement que vous devrez peut-être remplacer .wp-block-embed-pinterest par une classe CSS différente, en fonction du contenu que vous souhaitez cibler.

Si vous souhaitez définir une largeur maximale pour tous les Contenu embarqués, vous pouvez utiliser l’extrait suivant :

.wp-block-embed {
    max-width: 900px!important;
}

La manière la plus simple d’ajouter un CSS personnalisé à votre site est d’utiliser WPCode. Il suffit de créer un nouvel extrait personnalisé en suivant le même processus que celui décrit ci-dessus.

Cette fois-ci, ouvrez le menu déroulant « Type de code » et sélectionnez « Extrait CSS ».

Adding a CSS snippet to WordPress

Vous pouvez maintenant enregistrer et publier cet extrait exactement de la même manière que vous mettez en direct n’importe quel extrait de WPCode.

Ceci fait, WordPress utilisera cette valeur comme taille maximale pour vos contenus embarqués.

Astuce : Comment ajouter facilement vos flux de réseaux sociaux à WordPress

Si vous embarquez régulièrement du contenu provenant de plateformes de réseaux sociaux, vous pouvez alors Gagner beaucoup de temps et d’efforts en utilisant Smash Balloon.

Smash Balloon est la meilleure extension de médias sociaux pour WordPress et vous permet d’ajouter facilement vos flux de réseaux sociaux à un site WordPress.

An example of an embedded social media post, created using Smash Balloon

Il supporte tous les contenus embarqués des réseaux sociaux les plus populaires, notamment les vidéos YouTube, Twitter, Instagram et TikTok.

Plus important encore, Smash Balloon est responsive pour les mobiles et fonctionne avec n’importe quel thème WordPress, de sorte que votre contenu embarqué aura toujours fière allure.

An example of an embedded Facebook timeline, created using Smash Balloon

Nous espérons que cet article vous a aidé à apprendre comment définir un point de terminaison oEmbed max width dans WordPress. Vous pouvez également consulter notre guide sur la façon d’intégrer facilement un code iFrame dans WordPress, ou notre comparaison d’experts du meilleur logiciel de discussion en direct pour les petites entreprises.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

44 commentairesLaisser une réponse

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Andreu

    The problem of this is that it makes the max width of the images also to the size defined. What can I do if I want to limit the embed width in the editor but not the image one? Thanks

  3. Joe Daniel

    Thank you. I’ve been struggling with this for weeks… works for WP 4.0 with Genesis theme

  4. digg

    Hi, it works perfectly for me.
    But this affects to the overall site, which have different widths since there are full-width pages, with sidebars, or forums, etc.
    Is it possible to discriminate this to affect only bbpress forum’s pages?

    It will be very useful, thanks!

  5. Ajit Kumar

    For anybody who can’t get this working or if Youtube videos and other iframe content are not getting resized, you will need to add the following code to your style.css

    /* Make sure embeds and iframes fit their containers */
    embed,
    iframe,
    object {
    max-width: 100%;
    }

    Hope this helps. And Syed, thanks for the great post!

    • Waymond

      Thanks for posting the solution!

  6. Dj

    THANKS! This was driving me crazy.

  7. Anto (@imanto)

    You can’t use iframe, object, embed { max-width: 100%; height:auto;} yes it gets the width correct and makes the video responsive, but it doesnt fix the height when viewing in the browser.

    Is there actually a way to do this? Ive tried pretty much everything, even fitvids dont work because you are setting a px base width in the functions, but it shows that width on mobile, then when you try to correct that with max-width, the height messes up even in the browser….

    im thinking media queries or something? ugh im beat.

  8. Amir

    Works perfect, thanks a lot!

  9. Pierre Dickinson

    Hi, thanks for the tip, but it doesn’t work, here’s what you need in your function.php file :

    add_filter(’embed_defaults’,’yourthemename_embed_defaults’);
    function yourthemename_embed_defaults($defaults) {
    $defaults[‘width’]=600; // or whatever you want
    $defaults[‘height’]=360; // or whatever you want
    return $defaults;
    }

    it works great!
    Regards,

    • Filip Kojic

      This code doesnt work well. I put my theme name and theme just blocks.

    • Valerie

      Not sure if the other commenter realized it, but the code has curly quotes and would break a site. Gonna test here to see if shortcode wrappers will prevent the change that broke the code…

      add_filter('embed_defaults','yourthemename_embed_defaults');
  10. John Cronin

    I am attempting to post a high-end animation film from YouTube to my WordPress blog. The bottom of the frame is cut off in the preview. Once the play arrow is clicked, this problem goes away. But the filmmaker is rightfully unhappy that the preview in the post will give the appearance of an error. Adjusting height and width in the post code works, but does not solve the problem. Ideas?

  11. Colin

    Worked like a charm – thanks!

  12. Ryan Silver

    Hi there,

    I used your solution for width and it worked great. But how do I set the height now? Is it just the same if ( ! isset( $content_width ) ) $content_width = 560; but with the word ‘width’ is replaced with the word ‘height’ ? I tried that and it did not work….

      • FIlip Kojic

        It looks like it is 16:10. Here is example:

        How can I change height. Please someone answer. :)

  13. Jasmine Ham

    greats, it’s working! but what if i need it to be responsive?
    any idea to doing that?

  14. josef

    hi,
    is there a way to force all ifreams in the site to be 100% widht. not omly youtube
    i have about 300 ifreams and all fixed size so… thanks in advance
    Josef

  15. josef

    hi,
    is there a way to force all ifreams in the site to be 100% widht. not omly youtube
    i have about 300 ifreams and all fixed size so…

  16. Ryan

    I added this code to my functions.php but it made no difference, and I assume that’s because my theme doesn’t define $content_width.

    I see the link to the codex about defining it, but I’m not a developer and don’t have one on call; how does one add a $content_width definition to a theme? Where does it go? Thanks!

  17. Justin Germino

    This worked perfectly, is there anyway to force and default the video to HD quality instead of SD quality which seems to be the default even though in my YouTube settings I have it set to default to HD?

    • Editorial Staff

      What is your max width? I have read in the past that Youtube adjusts quality based on the width of the iframe.

      Administrateur

  18. Grant Norwood

    Please note that the $content_width variable must be declared as global before this fix will work.

  19. Nigel Parry

    WP seems to be updated by people who are unclear about the centrality of multimedia on the Internet. Why this basic preference would have to require code intervention I don’t know. WP clearly could not tell how wide my columns were. Anyway, all fixed now. You folks rock.

    • Editorial Staff

      Well Nigel, there is more to it. They are trying to make WordPress easier to use for « users ». Overtime, WordPress has added one option after another. This gets really terrifying for new users. This is why they are going with decisions over options route. The hope with this oEmbed max width is that each theme designer should/will define it in their themes, so the end-user doesn’t have to worry about it.

      Administrateur

  20. Alex Leonard

    Thanks! I was a little baffled as to where the media embed setting had gone to!

  21. Azad

    Hello
    Thanks for your post.

    But I can’t get this right, I wrote the other post you mentioned in the comments. But I still can’t get it working, I put this:

    At the begginin of my functions.php, but then my whole site stoped working. everything turned white, I had to edit the file through ftp to get it working again.

    What am I doing wrong?

    Thanks!

    • Azad

      Hey :)
      I got it working, thanks!

  22. Monica

    Hi, where in the functions.php file should this code be placed?

  23. Jesse Garnier

    What value would be appropriate for $content_width for a variable-width or responsive design?

    • Editorial Staff

      For responsive design, you probably want to use fitvid.js or something similar to resize your videos.

      Administrateur

    • Paul Lumsdaine

      I was able to kind of get the responsiveness to work with setting a max-width: 100% on my iframes in CSS. Of course the height is set automatically depending on your content width but this should at least get it working correctly without using any extra js. Fitvid is the way to go, but this worked for me.

      • Jeremy Myers

        Paul,

        Can you include the css you used to set your iframe width to 100%?

        • Roman

          I use this CSS code for responsive design:

          iframe, object, embed { max-width: 100%; } ( if you want you can add -> height: auto )

        • Tevya

          Unfortunately Roman’s CSS either doesn’t work on some themes or doesn’t work with the new WP 3.6 media player that’s built-in to core. I just tried it and nothing. I’m trying to get a theme that’s responsive to keep the new WP 3.6 player responsive as well, but no luck so far. The 2012 theme seems to handle it very nicely, but I can’t figure out what they’re doing different than this theme I’m working with.

  24. Melanie

    I am a novice to WP & coding, with that said not sure where to put the code « if ( ! isset( $content_width ) ) $content_width = 600; » I went to the function.php file in my Suffusion theme and not sure where exactly to insert this code. I tried a number of places where it mentioned video attachment and it is not working. In my case, the embedded videos are now too big for my theme since upgrading to WP 3.5.

    • Editorial Staff

      Change the number 600 to match your theme size. If it is too big for your theme, then make it smaller.

      Administrateur

  25. Jessi Linh

    It’s been released at right time!!! The name « Elvin » is so special,too.
    Thanks for your post.

    • Editorial Staff

      Yup, totally agreed with you there. Only poorly coded themes will not have that. But there are a lot of those out there. A theme that one of our clients was using had that piece missing. Overall, its a good theme.

      Administrateur

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.