28114 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

Je ne vois pas trop. Il faudrait qu'on ai la totalité d'un slider fonctionnel avec la video dans un codepen ou autre pour voir.
Modérateur
Bonjour,

el_debutanti a écrit :
Je peux peut-être le mettre en ligne !?


Oui pourquoi pas ?
el_debutanti a écrit :
Smiley bawling Smiley bawling Smiley bawling Smiley bawling j'y arrive pas Smiley bawling Smiley bawling Smiley bawling
https://jsfiddle.net/herde2/j4mfxcn8/1/

Il manque jQuery dans ton fiddle.



Autrement, quelle est ce slider que tu utilises et veux adapter, je n'ai pas repéré celui sur lequel tu avais jeter ton dévolu, du coup , je n'ai pas de visuel non plus au résultat escompté.

Cdt
Modifié par gcyrillus (08 Jun 2022 - 15:17)
el_debutanti a écrit :
Bonjour gcyrillus,
C'est un vieux slider (10 ans ?) que j'avais mis de côté avant d'abandonner mon site... il y a presque 10 ans Smiley hum
Je mis suis remis difficilement fin 2021.
Voici le lien :
https://lapagetest.fr/tests/index.html
Merci à vous,
ED


Bein ça marche plutot bien (à part la police qui est illisible).
C'est quoi le problème ?
Modérateur
kerlutinoec a écrit :


Bein ça marche plutot bien (à part la police qui est illisible).
C'est quoi le problème ?


tout pareil , + trop rapide pour moi et rien à cliquer pour aller plus loin ... ça fait panneau publicitaire du coup Smiley smile
Je n'ai laissé que le slider Smiley ravi
Le souci c'est la vidéo, non responsive et pas à width 100 en plan extra large.
Mais sinon, ça roule Smiley smile
Modérateur
Je pense que tu t'emmele les pinceaux dans la façon de donner une taille à ta balise vidéo et l'utilisation de object-fit.

etape 1 : donner une taille (ou un ratio) fixe et maximale à la balise vidéo .
etape 2 : appliquer object-fit pour l'effet escompter.
etape 3: si nécessaire, modifier la valeur par defaut de object-position pour le recadrage de la zone à montrer en priorité.

Cela devrait t'être utile :

 .bg-img video{
   height:100%;
   width:100%;
   max-width:100%;
   max-height:100%;
   border:0;
   object-fit: cover;
/* object-position:  reset ici si besoin ;*/
}

Modifié par gcyrillus (08 Jun 2022 - 16:46)
Meilleure solution
el_debutanti a écrit :
Je n'ai laissé que le slider Smiley ravi
Le souci c'est la vidéo, non responsive et pas à width 100 en plan extra large.
Mais sinon, ça roule Smiley smile


Je ne vois pas de différence d'occupation de l'espace entre les photos et la vidéo.
Modérateur
kerlutinoec a écrit :


Je ne vois pas de différence d'occupation de l'espace entre les photos et la vidéo.


En fait c'est la partie visible qui laisse comprendre que la video déborde de son conteneur et du coup elle n'est pas vraiment recadrer sur son centre, mais le centre de la taille excessive/de débordement qu'elle prend.

Cdt
Modérateur
el_debutanti a écrit :
Merci à vous.
Comment faire alors Smiley murf ?
Bonne soirée,
ED


Si aucune des pistes ou propositions proposées par tous ne fonctionnent, j’avoue me poser la question si on à bien compris le résultat attendu ? C'est bien un slider sur toute la hauteur et largeur de la fenêtre que tu essai de mettre en place ?
cdt
Modérateur
el_debutanti a écrit :
Oui gcyrillus

okay
el_debutanti a écrit :

, et responsive.
Désolé mais on y est presque Smiley smile

et donc qu'est ce que :
.bg-img video{
   height:100%;
   width:100%;
   max-width:100%;
   max-height:100%;
   border:0;
   object-fit: cover;
/* object-position:  reset ici si besoin ;*/
}

fait, ne fait pas ou n’améliore pas en final ?
En fait , qu'entends tu par responsive ? (pour 1 seul élément, toute la fenêtre, c'est toute la fenêtre Smiley confused )

el_debutanti a écrit :

Bonne soirée,
ED

Idem Smiley smile
GENIIIIIIAAAAAALLLLLLLL !!!!
Merci infiniment Smiley lol Smiley lol Smiley lol Smiley lol Smiley lol Smiley lol Smiley lol Smiley lol
Puis-je avoir une explication sur tout le déroulé et ses explications jusqu'au final ? Histoire de comprendre ?
Merci à vous tous. Vous êtes TOP.
Bonne soirée,
ED
Sources, pardon kerlutionec Smiley confused
genre ce que je n'arrive pas à adapter :
    <source src="/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">

Bonne journée, et... MERCI !