Vidéo l'une en dessous de l'autre

[valeriesch]

Bonjour,

Lorsque je mets certaines vidéos avec le code iframe dans le code, certaines vidéos se placent les unes en dessous des autres. Bien que je mette le code iframe, l'un à côté de l'autre en supprimant le p. Alors que je veux ces vidéos l'une à côté de l'autre.
Merci

[toffffe]

Salut
As tu un template qui utilises un framework ?
Si oui lequel ?

[valeriesch]

Je ne sais pas. J'ai le code pour mon site internet.

https://www.associationanimalia.fr/index.php?option=com_content&view=article&layout=edit&id=70&Itemid=105

[toffffe]

Ton template utilise Bootstrap tu devrais insérer ton code dans une grille comme sur cette exemple https://getbootstrap.com/docs/4.0/layout/grid/

<div class="container">
<div class="row">
<div class="col">
ton code video ici
</div>
<div class="col">
ton second code video ici
</div>
</div>​
</div>

[valeriesch]

Bonjour,
Mon code est avec des p

</p>
<p>Elle nourrit plus de 200 chiens et chats abandonnés</p>
<p>Contact par facebook : Après lui avoir donné la liste des organismes qu'elle peut contacter pour de l'aide, nous lui spécifions que si elle veut quitter la ville, elle peut appeler K9 Global Rescue&nbsp; ou Breaking the Chains pour venir chercher les animaux et les mettre dans des endroits plus sûrs. Elle répond qu'elle ne quittera pas la ville : elle nourrit les animaux sans abri depuis le début de la guerre, pris des animaux handicapés chez elle et 20 chiens dans la cour. Ils ont roulé sous les bombes pour nourrir les animaux.</p>
<p>Sa page Facebook :<a href="https://www.facebook.com/profile.php?id=100002014873733" target="_blank" rel="noopener"> https://www.facebook.com/profile.php?id=100002014873733&nbsp;</a></p>
<p><span style="text-decoration: underline;"><span style="font-size: 14pt; color: #000080; text-decoration: underline;">Alex Maestro dans la ville d'Odessa</span></span></p>
<p>Alex Maestro est un musicien, compositeur, chef d'orchestre et producteur de son à Odessa (Sud Ouest de l'Ukraine). Il nourrit les animaux abandonnés depuis la guerre et même avant.</p>
<p>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpho to.php%3Ffbid%3D5216643765089865%26set%3Da.1040132 16352971%26type%3D3&amp;show_text=true&amp;width=5 00" width="500" height="497" style="border: none; overflow: hidden;" scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" frameborder="0"></iframe>
<iframe src="https://www.facebook.com/plugins/video.php?height=476&amp;href=https%3A%2F%2Fwww.fa cebook.com%2FalexmusicKM%2Fvideos%2F12522193320001 49%2F&amp;show_text=false&amp;width=267&amp;t=0" width="267" height="476" style="overflow: hidden;" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowfullscreen="true" scrolling="no" frameborder="0"></iframe>

[toffffe]

Attention tu as une fermeture de balise qui ne fait pas partie de cette partie car

</p>

c'est une fermeture
Les code vidéo sont entre

<iframe....> et </iframe>

soit video 1

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpho to.php%3Ffbid%3D5216643765089865%26set%3Da.1040132 16352971%26type%3D3&amp;show_text=true&amp;width=5 00" width="500" height="497" style="border: none; overflow: hidden;" scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" frameborder="0"></iframe>

video2

<iframe src="https://www.facebook.com/plugins/video.php?height=476&amp;href=https%3A%2F%2Fwww.fa cebook.com%2FalexmusicKM%2Fvideos%2F12522193320001 49%2F&amp;show_text=false&amp;width=267&amp;t=0" width="267" height="476" style="overflow: hidden;" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowfullscreen="true" scrolling="no" frameborder="0"></iframe>​

ce qui devrait te donner avec mon code ci-dessus :

<p>Elle nourrit plus de 200 chiens et chats abandonnés</p>
<p>Contact par facebook : Après lui avoir donné la liste des organismes qu'elle peut contacter pour de l'aide, nous lui spécifions que si elle veut quitter la ville, elle peut appeler K9 Global Rescue&nbsp; ou Breaking the Chains pour venir chercher les animaux et les mettre dans des endroits plus sûrs. Elle répond qu'elle ne quittera pas la ville : elle nourrit les animaux sans abri depuis le début de la guerre, pris des animaux handicapés chez elle et 20 chiens dans la cour. Ils ont roulé sous les bombes pour nourrir les animaux.</p>
<p>Sa page Facebook :<a href="https://www.facebook.com/profile.php?id=100002014873733" target="_blank" rel="noopener"> https://www.facebook.com/profile.php?id=100002014873733&nbsp;</a></p>
<p><span style="text-decoration: underline;"><span style="font-size: 14pt; color: #000080; text-decoration: underline;">Alex Maestro dans la ville d'Odessa</span></span></p>
<p>Alex Maestro est un musicien, compositeur, chef d'orchestre et producteur de son à Odessa (Sud Ouest de l'Ukraine). Il nourrit les animaux abandonnés depuis la guerre et même avant.</p>​

<div class="container">
<div class="row">
<div class="col">
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpho to.php%3Ffbid%3D5216643765089865%26set%3Da.1040132 16352971%26type%3D3&amp;show_text=true&amp;width=5 00" width="500" height="497" style="border: none; overflow: hidden;" scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" frameborder="0"></iframe>
</div>
<div class="col">
<iframe src="https://www.facebook.com/plugins/video.php?height=476&amp;href=https%3A%2F%2Fwww.fa cebook.com%2FalexmusicKM%2Fvideos%2F12522193320001 49%2F&amp;show_text=false&amp;width=267&amp;t=0" width="267" height="476" style="overflow: hidden;" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowfullscreen="true" scrolling="no" frameborder="0"></iframe>
</div>
</div>​
</div>​

[valeriesch]

Cela veut donc dire que je dois supprimer ces

p

après la vidéo ? Et rajouter tout votre code avec div ?

[toffffe]

le code avec les div c'est pour avoir 2 colonnes l'une à côté de l'autre avec bootstrap
Entre le code avec les div tu peux mettre des <p> sans problème.
Mais la structure autour avec les div doit être respectée.
Tu as pas mal de modèle ici https://getbootstrap.com/docs/4.0/layout/grid/ en fonction de ce que tu veux faire.
Après la disposition peut s'adapter en fonction du terminal utilisé, c'est à dire si tu utilise un smartphone, tu peux demander qu'à partir de tel largeur les videos se retrouvent les unes sous les autres ...

[valeriesch]

Bonjour,
J'ai donc suivi vos instructions et les vidéos se sont mises l'une à côté de l'autre.
Mais malheureusement quelques jours après, certaines vidéos se sont remises l'une en dessous de l'autre, tandis que les autres vidéos sont restées l'une à côté de l'autre. Or je n'ai touché à rien. C'est vraiment bizarre.

[toffffe]

C'est peut-être ton éditeur de code qui supprime certaines mise en page ?
Qu'as-tu dans le code de la page de différent ? il y a t'il eu des suppressions de code ? Compare

[valeriesch]

Je ne sais pas quel est mon éditeur de code ? Peut-être JCE Editor Pro ?
J'ai copié le code des vidéos qui restent l'une à côté de l'autre. Et pour le moment les vidéos restent l'une à côté de l'autre.
Je vais voir si, dans une semaine les vidéos, restent les unes à côté des autres.

[toffffe]

Sans y toucher, je ne vois pas pourquoi il y aurait un changement.

[ManuelVoileux]

Bonjour tout le monde,
je pense que un petit coup de plugin UP, action flexauto, avec les iframes entre les balises flexauto, donnerait beaucoup de souplesse à l'affichage : côte à côte sur grand écran, et l'une au dessus de l'autre sur smartphone (si besoin)
voir sur le JED https://extensions.joomla.org/extension/up/
et la pres lors des joomladay : https://www.joomladay.fr/replay-2022#semaine8 , voir Atelier "UP" (Universal Plugin) par lomart

En bref installer le plugin UP. Ensuite dans l'article ou dans le module, ajouter le code. Compte tenu des balises HTML il faut passer dans la fenêtre code.

{up flexauto=2 | tablet=2 | mobile=1 }
<p><iframe...></p>
<p><iframe..></p>
{/up flexauto}​

UP propose également une action iframe qui permet de tout faire en mode éditeur sans passer par la fenêtre code. Dans la fenêtre éditeur :

{up flexauto=2 | tablet=2 | mobile=1 }
{up iframe=//www.dailymotion.com/embed/video/x78gqbi | preview=images/actions-demo/iframe/iframe-dailymotion.jpg}
{=====}
{up iframe=//www.dailymotion.com/embed/video/x78gqbi | preview=images/actions-demo/iframe/iframe-dailymotion.jpg}
{/up flexauto}​

Manuel

UP is fabulousse !

[toffffe]

Sympa je ne connaissais pas. Pratique pour ceux qui ne veulent pas aller dans le code. Merci

[ManuelVoileux]

Sympa je ne connaissais pas. Pratique pour ceux qui ne veulent pas aller dans le code. Merci

C'est exactement çà ! je suis un amateur, je n'ai jamais programmé plus loin que des macro Excel, et du html dans les années 2000. J'ai essayé de bidouiller du javascript, des fichiers php, du css. La communauté du forum m'aide beaucoup lorsque je coince.

Et UP me permet d'obtenir des résultats très facilement. UP de lomart , c'est plus de 130 actions. Je l'utilise pour des galeries d'images, des articles avec accordéons, de la mise en page responsive d'articles qui contiennent des modules, le design de tables responsive qui contiennent des listes d'articles avec le même tag, le design du module qui affiche quelques articles au hasard en page d'accueil, l'affichage de galerie de pdf, avec lecture du fichier en mode magazine. Le css simplifié peut être directement inclus dans le shortcode.

Avec UP j'ai simplifié le site et limité le nombre d'extensions.

UP is fabulousse !