La création d’un article de blog nécessite beaucoup de réflexion : le contenu n’est qu’un début. Vous devez également penser au contenu multimédia autre que le texte, si vous souhaitez l’inclure – et le contenu riche en médias est à peu près la norme de nos jours. Les murs de texte sont rebutants : les meilleures pratiques en matière de conception de sites Web imposent que le texte soit entrecoupé d’images. Mais qu’en est-il des images animées ?
Si vous avez déjà essayé de formater un texte contenant des images ou d’autres contenus intégrés, vous savez à quel point il peut être difficile de faire en sorte que tous les différents éléments se comportent comme vous le souhaitez. Et WordPress, aussi polyvalent soit-il, a certaines limites. Heureusement, il existe également un large éventail d’options de formatage utiles, quel que soit l’éditeur que vous utilisez. Avant d’entrer dans les détails, nous aimerions discuter des raisons pour lesquelles vous devriez même vous soucier de centrer une vidéo dans WordPress.
C’est de cela que nous allons discuter :
Votre contenu est peut-être de premier ordre, mais s’il apparaît pas professionnel à première vue, vos visiteurs seront rebutés, certains peut-être même avant d’y entrer. Et vous ne voulez pas d’un taux de rebond élevé ou d’une mauvaise expérience utilisateur, n’est-ce pas ?
Si vous intégrez une vidéo dans votre contenu, et que la vidéo est moins large que l’espace alloué à votre contenu, WordPress l’alignera parfois à gauche par défaut, laissant espace vide inutilisé vers la droite. Cela ne semble pas bon pour des raisons qui ne sont pas purement esthétiques : cela donne à votre site Web un aspect bâclé, amateur et mal présenté. En revanche, le fait de centrer une vidéo donne à votre site Web un aspect au moins réfléchi. Un grand espace vide est fondamentalement la seule chose que vous devriez éviter.
L’éditeur par défaut de WordPress facilite le centrage d’une vidéo : vous pouvez le faire en un seul clic.
Pour ajouter une vidéo, cliquez simplement sur le plus signe pour ajouter un bloc et sélectionnez un bloc vidéo.
Le bloc vidéo Gutenberg a plusieurs sources vidéo possibles. Tu peux Télécharger une vidéo dans votre médiathèque, utilisez une vidéo déjà dans votre Médiathèque, ou Insérer à partir de l’URL. nous sélectionnerons Insérer à partir de l’URL, collez l’URL et cliquez sur Appliquer.
Une fois votre vidéo intégrée, elle doit être centrée par défaut. Pour vous en assurer, cliquez sur le Modifier l’alignement menu déroulant et sélectionnez Aligner au centre.
Et votre vidéo sera maintenant centrée. Notez que d’autres alignements sont disponibles et fournissent des résultats de formatage différents. Un alignement à gauche ou à droite permettra également un habillage du texte autour de la vidéo, de sorte que vous n’obtenez aucun espace vide disgracieux.
Vous pouvez également intégrer une vidéo à l’aide d’un bloc HTML au lieu d’un bloc vidéo, au cas où vous voudriez utiliser plus de paramètres. Pour ce faire, cliquez sur le plus signe pour ajouter un bloc et sélectionnez le HTML personnalisé bloquer.
Le code que vous devez coller pour intégrer une vidéo est le suivant :
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper"> URL </div></figure>
Bien sûr, vous devez remplacer les lettres URL dans le code ci-dessus par l’URL de la vidéo que vous souhaitez intégrer. Ce code ne fonctionnera également que pour les vidéos YouTube.
Cette méthode de code devrait également entraîner une vidéo centrée par défaut. Si ce n’est pas le cas, vous devez ajouter le paramètre suivant :
style="text-align: center;"
au premier div balise, comme ceci :
Bien sûr, vous avez peut-être choisi de désactiver Gutenberg pour une raison quelconque. Dans ce cas, vous utilisez probablement l’éditeur classique. C’est très bien – vous pouvez également utiliser le Éditeur classique pour centrer vos vidéos.
À partir du Visuel mode, vous pouvez simplement intégrer une vidéo en collant le lien. Nous allons presser notre URL entre les paragraphes.
Votre vidéo sera automatiquement intégrée.
Afin de centrer une vidéo, vous devrez éditer un article ou une page dans Texte mode.
Une fois dans Texte mode, localisez votre vidéo intégrée. Vous devriez être capable de reconnaître son URL.
Afin de centrer votre vidéo, ajoutez ce code au-dessus de l’URL de la vidéo :
<div style="text-align: center;">
Et ceci ci-dessous :
</div>
Et votre vidéo sera centrée dans la version publiée du message. Vous pouvez voir votre code au travail si vous jetez un oeil à la Visuel onglet de votre éditeur.
Et même si vous utilisez du code pour intégrer une vidéo pour une raison quelconque, coller les balises div au-dessus et en dessous de votre code d’intégration devrait toujours fonctionner.
Centrer une vidéo avec Elementor est, comme dans Gutenberg, une fonction par défaut pour la plupart. Pour ajouter une vidéo, faites simplement glisser un Vidéo élément du menu de gauche à l’endroit où vous le souhaitez dans la publication.
Une fois l’élément en place, collez l’URL de la vidéo dans le Lien domaine.
Votre vidéo doit être centrée par défaut. Si ce n’est pas le cas, vous trouverez les commandes d’alignement dans la Modifier la colonne menu de votre nouvelle section vidéo.
L’alignement vertical et horizontal peut être modifié dans le Disposition languette.
En conclusion
Et, aussi simple que cela, nous avons montré qu’il existe plusieurs façons de centrer une vidéo dans WordPress, et toutes les différences sont principalement dues à l’éditeur que vous utilisez. Bien sûr, cela ne touche que légèrement lors du formatage dans WordPress. Mais bien sûr, il existe de nombreuses autres options (en utilisant des colonnes pour le formatage, par exemple) qui peuvent affecter la façon dont les vidéos intégrées sont présentées à vos utilisateurs. Nous vous encourageons fortement à explorer.
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
