28182 sujets

CSS et mise en forme, CSS3

Problème alignement vidéo Youtube dans wordpress

Bonjour à tous

Ma configuration WP actuelle

Version de PHP/MySQL : PHP 7.3
Thème utilisé : Mon propre thème
Extensions en place : aucune
Nom de l’hébergeur : LWS

Problème(s) rencontré(s) :

Je rencontre un soucis pour gérer l’alignement des contenue de type « Embed » comme les vidéos youtube par exemple

via mon via CSS j’ai pu gérer le comportement des image et des textes en matière de position

Ainsi avec les image et les texte je peux choisir de les aligner à droite, à gauche ou au centre via les boutons de l’éditeur visuel de wordpress

voici ci dessous le code css que utilise pour parvenir à ce résultat

 
}
img.alignnone {
padding: 1%;
display: block;
float: left;
}
img.alignleft {
padding: 1%;
display: block;
float: left;
}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 1%;
display: block;
float: right;
}
.alignnone {
display: block;
float: left;
}
.alignleft {
display: block;
float: left;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignright {
display: block;
float: right;
}


je suis à la recherche d’une solution identique pour pouvoir définir l’alignement des vidéo youtube via l’éditeur visuel

merci de votre aide
Bonjour,

Quelle version de Wordpress utilisez-vous ?

Avec la dernière version et l'éditeur Gutenberg, il est possible d'aligner les vidéos Embed avec le même système d'alignements que vous citez pour les images.

Bonne journée
Bonjour

J’utilise la version 5.2 de Worpress

Avec l’éditeur visuel gutemberg j’arrive aligner à gauche ou à droite mais le bouton centrer n’a aucun effet
Cela dépend également de votre thème.

Sur celui que j'utilise, le aligncenter n'a d'effet sur la vidéo que si je lui attribue une taille en CSS.

Voici le output sur la page :

<figure class="wp-block-embed-youtube aligncenter wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<div class="jetpack-video-wrapper"><span class="embed-youtube" style="text-align:center; display: block;"><iframe class="youtube-player" type="text/html" src="https://www.youtube.com/embed/LBo-TmKssf0?version=3&amp;rel=1&amp;fs=1&amp;autohide=2&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;wmode=transparent" allowfullscreen="true" style="border: 0px none; display: block; margin: 0px; width: 450px; height: 253.469px;" data-ratio="0.563265306122449" data-width="980" data-height="552"></iframe></span></div>
</div></figure>


Pour forcer la taille et donc obtenir un alignement centré, je peux faire par exemple :


.wp-block-embed-youtube.aligncenter {
       max-witdh: 300px;
}


Après tout dépend de votre thème et de vos plugin pour obtenir les bonnes classes à éditer.
Sujet clos
Aller à