WordPress facilite la création de pages multimédias attrayantes en intégrant automatiquement du contenu tiers comme des vidéos YouTube et des Tweets.
Cependant, après avoir travaillé en étroite collaboration avec les utilisateurs de WordPress pendant plus de 15 ans, une leçon que nous avons apprise est que les oEmbeds peuvent également causer des problèmes. Imaginez une vidéo YouTube débordant de son conteneur et poussant 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 la définition d'une largeur maximale pour les oEmbeds. Elle vous permet de prendre le contrôle et de vous assurer que votre contenu intégré s'adapte parfaitement au design de votre site.
Dans cet article, nous vous montrerons comment définir la largeur maximale des oEmbeds dans WordPress afin que vous ayez un contrôle total sur la mise en page de votre site.
Pourquoi corriger la largeur maximale des oEmbeds dans WordPress ?
WordPress prend en charge oEmbed, ce qui vous permet d'intégrer automatiquement du contenu provenant de sites Web tiers. Par exemple, vous pouvez facilement intégrer des vidéos YouTube, des présentations SlideShare, des tweets et de nombreux autres types de contenu.
Ce contenu n'est pas hébergé sur votre serveur, il ne ralentira donc pas votre site Web. En particulier, vous devriez toujours utiliser des technologies telles que oEmbed, et ne jamais télécharger une vidéo sur WordPress.
Note : Bien que Facebook et Instagram aient tous deux pris en charge oEmbed par le passé, Meta a depuis abandonné la prise en charge d'oEmbed. Pour obtenir des instructions étape par étape sur la façon de réparer cette fonctionnalité, veuillez consulter notre guide sur comment résoudre le problème oEmbed de Facebook et Instagram dans WordPress.
WordPress essaiera toujours d'ajuster la largeur du contenu intégré afin qu'il s'adapte parfaitement à l'espace disponible. Cependant, il arrive que le contenu intégré soit trop large et chevauche d'autres zones de contenu de votre site Web.
Malheureusement, vous ne pouvez pas définir une largeur maximale pour les intégrations tierces à l'aide des outils intégrés de WordPress.
Cela dit, voyons comment vous pouvez ajouter cette fonctionnalité manquante et définir une largeur oEmbed maximale dans WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :
- Méthode 1 : Utilisation du shortcode d'intégration (idéal pour les vidéos YouTube)
- Méthode 2 : Utilisation des blocs d'intégration intégrés de WordPress (facile)
- Méthode 3 : Utilisation de PHP personnalisé (définir une largeur maximale pour toutes les intégrations)
- Méthode 4 : Utilisation de CSS (définir une largeur maximale pour des types d'intégration spécifiques)
- Astuce bonus : Comment ajouter facilement vos flux de médias sociaux à WordPress
Méthode 1 : Utilisation du shortcode d'intégration (idéal pour les vidéos YouTube)
Vous pouvez définir une largeur maximale à l'aide d'un shortcode. Cette méthode est facile, surtout si vous ne souhaitez définir la largeur maximale que pour un petit nombre d'articles. Nous avons également constaté que cette méthode fonctionne bien pour intégrer des vidéos dans les articles de blog WordPress.
Cependant, le shortcode d'intégration et ses paramètres de largeur et de hauteur ne fonctionnent pas pour tous les fournisseurs oEmbed. Par exemple, vous ne pouvez pas l'utiliser pour définir la hauteur et la largeur d'une intégration 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 publication, vous devrez créer un bloc shortcode. Vous pouvez ensuite ajouter des paramètres de largeur et de hauteur au code d'intégration.
Par exemple, il vous suffit d'encapsuler ce qui suit dans des balises embed :
width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues
Changez simplement les valeurs de largeur et de hauteur selon vos besoins et remplacez l'URL par le contenu que vous souhaitez intégrer.
Lorsque vous êtes satisfait de la page, cliquez simplement sur « Mettre à jour » ou « Publier ».
Le contenu intégré devrait maintenant s'intégrer parfaitement dans l'espace disponible.
Méthode 2 : Utilisation des blocs d'intégration intégrés 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, les diffusions en direct YouTube et les vidéos, et les intégrations SoundCloud.
Certains de ces blocs vous permettent de modifier l'alignement de l'intégration et de définir le contenu sur « Largeur étendue » ou « Pleine largeur ».
Si vous choisissez la pleine largeur, le bloc d'intégration et le contenu intégré occuperont toute la largeur de l'écran. Si vous choisissez la largeur étendue, le bloc d'intégration occupera toute la largeur, mais le contenu conservera la même taille.
Le résultat final peut varier en fonction de votre thème WordPress. Cependant, c'est une méthode rapide et facile, donc cela vaut la peine de voir si elle fonctionne pour votre site web WordPress.
Cliquez simplement sur le bouton « Aligner » dans la petite barre d'outils au-dessus du bloc. Ensuite, sélectionnez « Largeur étendue » ou « Pleine largeur ».
Si cela résout le problème de largeur maximale pour l'intégration, vous pouvez alors publier la page. Si vous n'êtes pas satisfait du résultat, vous devrez essayer une méthode différente.
Méthode 3 : Utilisation de PHP personnalisé (définir une largeur maximale pour toutes les intégrations)
Parfois, vous voudrez peut-être définir une largeur maximale pour tout le contenu intégré. La façon la plus simple de le faire est d'ajouter du code personnalisé à votre site web WordPress.
Le problème avec cette méthode est que l'attribut de largeur maximale ne fonctionnera que si le contenu intégré n'a pas déjà une « largeur » définie. Si le code d'intégration inclut déjà son propre attribut « width », alors cette méthode peut ne pas fonctionner.
Si vous n’avez jamais modifié le code de votre site auparavant, consultez notre guide sur comment ajouter facilement des extraits de code personnalisés dans WordPress.
Certains guides vous demandent de modifier manuellement les fichiers du thème, mais cela peut causer toutes sortes d’erreurs et même casser complètement votre site web.
Pour cette raison, nous recommandons d’utiliser WPCode. Il permet d’ajouter facilement des extraits de code dans WordPress sans avoir à modifier les fichiers de votre thème. Ainsi, vous pouvez mettre à jour ou changer votre thème sans perdre toutes vos fonctions de code personnalisées.
WPCode est également livré avec une bibliothèque d’extraits de code préconfigurés, qui comprend un extrait de code « Définir la largeur maximale d’oEmbed ». Cela vous permet de spécifier une largeur et une hauteur maximales pour vos oEmbeds.
Tout d’abord, vous devrez installer et activer le plugin gratuit WPCode. Pour plus d’informations, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Après l’activation, accédez à Extraits de code » Bibliothèque dans votre panneau d’administration WordPress.
Ici, vous pouvez rechercher « Définir la largeur maximale d’oEmbed » et passer votre souris sur le résultat portant le même nom.
Vous pouvez ensuite cliquer sur « Utiliser l'extrait ».
WPCode vous redirigera alors vers la page « Modifier l'extrait », où le plugin a déjà tout configuré pour vous.
Ici, vous remarquerez l’extrait de code prêt à l’emploi suivant :
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’ajuster les attributs de hauteur et de largeur selon vos besoins.
Enfin, cliquez sur le curseur « Inactif » pour qu'il affiche « Actif ». Cliquez ensuite simplement sur le bouton « Enregistrer le snippet » ou « Mettre à jour » pour rendre le snippet de code actif.
Méthode 4 : Utilisation de CSS (définir une largeur maximale pour des types d'intégration 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 d'intégration. Vous pouvez utiliser ces classes CSS pour définir une largeur maximale pour les intégrations sur votre blog WordPress.
C'est un bon choix si vous souhaitez définir une taille maximale pour un type d'intégration spécifique, tel que les Tweets intégrés. Il vous permet également de créer une taille maximale pour tout contenu intégré, quel que soit son type.
Pour savoir quelles classes CSS vous devez cibler, intégrez simplement du contenu dans un article ou une page, puis prévisualisez-le dans votre navigateur.
Ensuite, survolez le contenu intégré avec votre souris et faites un clic droit. Dans le menu qui apparaît, sélectionnez l'outil « Inspecter ».
Cela ouvre un nouveau panneau montrant toutes les classes CSS que WordPress a ajoutées au contenu intégré. Vous pouvez utiliser ces classes pour définir une largeur maximale pour ce type d'intégration.
Pour cibler un fournisseur oEmbed spécifique, vous utiliserez généralement .wp-block-embed-nomdufournisseur, alors recherchez cette classe dans le panneau.
Par exemple, dans l'image suivante, nous avons souligné la classe .wp-block-embed-nomdufournisseur . Sur cette ligne, nous pouvons également voir une classe .wp-block-embed-pinterest.
Vous pouvez définir une largeur maximale uniquement pour les intégrations Pinterest en utilisant 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 toutes les intégrations, vous pouvez utiliser l'extrait suivant :
.wp-block-embed {
max-width: 900px!important;
}
La façon la plus simple d'ajouter du CSS personnalisé à votre site Web est d'utiliser WPCode. Créez simplement un nouvel extrait personnalisé en suivant le même processus décrit ci-dessus.
Cependant, cette fois, ouvrez le menu déroulant « Type de code » et sélectionnez « Extrait CSS ».
Vous pouvez maintenant enregistrer et publier cet extrait de la même manière que vous rendez n'importe quel extrait WPCode actif.
Une fois cela fait, WordPress utilisera cette valeur comme taille maximale pour vos intégrations.
Astuce bonus : Comment ajouter facilement vos flux de médias sociaux à WordPress
Si vous intégrez régulièrement du contenu de plateformes de médias sociaux, vous pouvez gagner beaucoup de temps et d'efforts en utilisant Smash Balloon.
Smash Balloon est le meilleur plugin de médias sociaux pour WordPress et vous permet d'ajouter facilement vos flux de médias sociaux à un site WordPress.
Il prend en charge tous les embeds de médias sociaux populaires, y compris YouTube, Twitter, Instagram et les vidéos TikTok.
Plus important encore, Smash Balloon est responsive sur mobile et fonctionne avec n'importe quel thème WordPress, de sorte que votre contenu intégré sera toujours superbe.
Nous espérons que cet article vous a aidé à apprendre comment définir une largeur maximale d'oEmbed dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment intégrer facilement du code iFrame dans WordPress, ou notre comparaison experte des meilleurs logiciels de chat en direct pour petites entreprises.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Andreu
Le problème est que cela rend la largeur maximale des images également à la taille définie. Que puis-je faire si je veux limiter la largeur de l'intégration dans l'éditeur mais pas celle de l'image ? Merci
Joe Daniel
Merci. Je lutte avec ça depuis des semaines... ça fonctionne pour WP 4.0 avec le thème Genesis
digg
Salut, ça marche parfaitement pour moi.
Mais cela affecte le site dans son ensemble, qui a différentes largeurs car il y a des pages pleine largeur, avec des barres latérales, ou des forums, etc.
Est-il possible de discriminer cela pour n'affecter que les pages du forum bbpress ?
Ce sera très utile, merci !
Ajit Kumar
Pour ceux qui n'arrivent pas à faire fonctionner cela ou si les vidéos Youtube et autres contenus iframe ne sont pas redimensionnés, vous devrez ajouter le code suivant à votre style.css
/* S'assurer que les embeds et les iframes s'adaptent à leurs conteneurs */
embed,
iframe,
object {
max-width: 100%;
}
J'espère que cela vous aide. Et Syed, merci pour le super post !
Waymond
Merci d'avoir posté la solution !
Abhishek Sachan
ne fonctionne pas
Dj
MERCI ! Ça me rendait fou.
Anto (@imanto)
Vous ne pouvez pas utiliser iframe, object, embed { max-width: 100%; height:auto;} oui, cela corrige la largeur et rend la vidéo réactive, mais cela ne corrige pas la hauteur lors de la visualisation dans le navigateur.
Y a-t-il vraiment un moyen de faire ça ? J'ai essayé à peu près tout, même fitvids ne fonctionne pas car vous définissez une largeur de base en px dans les fonctions, mais cela affiche cette largeur sur mobile, puis lorsque vous essayez de corriger cela avec max-width, la hauteur se dérègle même dans le navigateur....
Je pense aux requêtes média ou quelque chose comme ça ? ugh je suis épuisé.
Amir
Fonctionne parfaitement, merci beaucoup !
Pierre Dickinson
Salut, merci pour l'astuce, mais ça ne marche pas, voici ce dont vous avez besoin dans votre fichier function.php :
add_filter(’embed_defaults’,’yourthemename_embed_defaults’); function yourthemename_embed_defaults($defaults) { $defaults[‘width’]=600; // ou ce que vous voulez $defaults[‘height’]=360; // ou ce que vous voulez return $defaults; }
ça marche très bien ! Cordialement,
Filip Kojic
Ce code ne fonctionne pas bien. J'ai mis le nom de mon thème et le thème se bloque.
Valerie
Je ne sais pas si l'autre commentateur s'en est rendu compte, mais le code a des guillemets courbes et casserait un site. Je vais tester ici pour voir si les wrappers de shortcode empêcheront le changement qui a cassé le code...
add_filter('embed_defaults','yourthemename_embed_defaults');John Cronin
J'essaie de poster un film d'animation haut de gamme de YouTube sur mon blog WordPress. Le bas de l'image est coupé dans l'aperçu. Une fois que la flèche de lecture est cliquée, ce problème disparaît. Mais le cinéaste est légitimement mécontent que l'aperçu dans le post donne l'apparence d'une erreur. Ajuster la hauteur et la largeur dans le code du post fonctionne, mais ne résout pas le problème. Des idées ?
Colin
Ça a marché à merveille – merci !
Ryan Silver
Bonjour,
J'ai utilisé votre solution pour la largeur et ça a très bien fonctionné. Mais comment définir la hauteur maintenant ? Est-ce juste la même if ( ! isset( $content_width ) ) $content_width = 560; mais avec le mot « width » remplacé par le mot « height » ? J'ai essayé et ça n'a pas fonctionné....
Personnel éditorial
La hauteur est déterminée automatiquement pour correspondre au ratio 16:9.
Admin
FIlip Kojic
Il semble que ce soit 16:10. Voici un exemple :
How can I change height. Please someone answer.
Jasmine Ham
Génial, ça marche ! mais et si j'ai besoin qu'il soit réactif ?
Une idée pour faire ça ?
josef
Salut,
Y a-t-il un moyen de forcer tous les iframes du site à avoir une largeur de 100 %. pas seulement youtube
J'ai environ 300 iframes et tous de taille fixe donc... merci d'avance
Josef
josef
Salut,
Y a-t-il un moyen de forcer tous les iframes du site à avoir une largeur de 100 %. pas seulement youtube
J'ai environ 300 iframes et tous de taille fixe donc...
Ryan
J'ai ajouté ce code à mon functions.php mais cela n'a fait aucune différence, et je suppose que c'est parce que mon thème ne définit pas $content_width.
Je vois le lien vers le codex sur la façon de le définir, mais je ne suis pas développeur et je n'en ai pas sous la main ; comment ajouter une définition de $content_width à un thème ? Où va-t-elle ? Merci !
Justin Germino
Cela a parfaitement fonctionné, y a-t-il un moyen de forcer et de définir par défaut la qualité HD de la vidéo au lieu de la qualité SD qui semble être la valeur par défaut même si dans mes paramètres YouTube, je l'ai réglé pour qu'elle soit par défaut en HD ?
Personnel éditorial
Quelle est votre largeur maximale ? J'ai lu par le passé que Youtube ajustait la qualité en fonction de la largeur de l'iframe.
Admin
Grant Norwood
Veuillez noter que la variable $content_width doit être déclarée comme globale avant que cette correction ne fonctionne.
Nigel Parry
WP semble être mis à jour par des personnes qui ne comprennent pas l'importance centrale du multimédia sur Internet. Je ne sais pas pourquoi cette préférence de base nécessiterait une intervention de code. WP n'a clairement pas pu déterminer la largeur de mes colonnes. Quoi qu'il en soit, tout est réparé maintenant. Vous assurez.
Personnel éditorial
Eh bien Nigel, il y a plus que cela. Ils essaient de rendre WordPress plus facile à utiliser pour les « utilisateurs ». Au fil du temps, WordPress a ajouté une option après l'autre. Cela devient vraiment terrifiant pour les nouveaux utilisateurs. C'est pourquoi ils privilégient les décisions plutôt que les options. L'espoir avec cette largeur maximale oEmbed est que chaque concepteur de thème devrait/définira cela dans ses thèmes, de sorte que l'utilisateur final n'ait pas à s'en soucier.
Admin
Alex Leonard
Merci ! J'étais un peu perplexe quant à l'endroit où le réglage d'intégration des médias avait disparu !
Azad
Bonjour
Merci pour votre publication.
Mais je n'arrive pas à faire fonctionner cela, j'ai écrit l'autre publication que vous avez mentionnée dans les commentaires. Mais je n'arrive toujours pas à la faire fonctionner, j'ai mis ceci :
Au début de mon functions.php, mais ensuite tout mon site a cessé de fonctionner. tout est devenu blanc, j'ai dû modifier le fichier via ftp pour le faire fonctionner à nouveau.
Qu'est-ce que je fais de mal ?
Merci !
Azad
Hey
I got it working, thanks!
Monica
Salut, où dans le fichier functions.php ce code doit-il être placé ?
Personnel éditorial
Vous pouvez le coller au début ou à la fin tant qu'il est indépendant des autres fonctions. Voici un article à ce sujet :
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Admin
Jesse Garnier
Quelle valeur serait appropriée pour $content_width pour une conception à largeur variable ou réactive ?
Personnel éditorial
Pour une conception réactive, vous voudrez probablement utiliser fitvid.js ou quelque chose de similaire pour redimensionner vos vidéos.
Admin
Paul Lumsdaine
J'ai réussi à faire fonctionner la réactivité en définissant une max-width: 100% sur mes iframes en CSS. Bien sûr, la hauteur est définie automatiquement en fonction de la largeur de votre contenu, mais cela devrait au moins le faire fonctionner correctement sans utiliser de JS supplémentaire. Fitvid est la voie à suivre, mais cela a fonctionné pour moi.
Jeremy Myers
Paul,
Pouvez-vous inclure le CSS que vous avez utilisé pour définir la largeur de votre iframe à 100 % ?
Roman
J'utilise ce code CSS pour la conception réactive :
iframe, object, embed { max-width: 100%; } ( si vous le souhaitez, vous pouvez ajouter -> height: auto )
Tevya
Malheureusement, le CSS de Roman ne fonctionne soit pas sur certains thèmes, soit il ne fonctionne pas avec le nouveau lecteur multimédia WP 3.6 intégré au cœur. Je viens de l'essayer et rien. J'essaie de trouver un thème réactif pour que le nouveau lecteur WP 3.6 le soit aussi, mais sans succès jusqu'à présent. Le thème 2012 semble le gérer très bien, mais je n'arrive pas à comprendre ce qu'ils font différemment de ce thème avec lequel je travaille.
Melanie
Je suis novice en WP & codage, avec cela dit, je ne suis pas sûr où placer le code « if ( ! isset( $content_width ) ) $content_width = 600; » J'ai accédé au fichier function.php de mon thème Suffusion et je ne suis pas sûr exactement où insérer ce code. J'ai essayé plusieurs endroits où il était mentionné l'attachement vidéo et cela ne fonctionne pas. Dans mon cas, les vidéos intégrées sont maintenant trop grandes pour mon thème depuis la mise à niveau vers WP 3.5.
Personnel éditorial
Changez le nombre 600 pour qu'il corresponde à la taille de votre thème. S'il est trop grand pour votre thème, alors réduisez-le.
Admin
Jessi Linh
Il est sorti au bon moment !!! Le nom « Elvin » est tellement spécial aussi.
Merci pour votre publication.
Edward Caissie
Ceci fait partie des raisons pour lesquelles la définition d'une valeur $content_width appropriée est une exigence selon les directives d'examen des thèmes WordPress (http://codex.wordpress.org/Theme_Review#Required_Hooks_and_Navigation)
Personnel éditorial
Oui, je suis totalement d'accord avec vous. Seuls les thèmes mal codés n'auront pas cela. Mais il y en a beaucoup. Un thème qu'un de nos clients utilisait avait cette partie manquante. Dans l'ensemble, c'est un bon thème.
Admin
Devin
Timing parfait. Merci !