26821 sujets

CSS et mise en forme, CSS3

Bonjour,

je dois faire une "onepage" avec une video entête qui doit s'afficher plein écran. l'ascenseur permettra aux internautes de défiler le reste en dessous.

Si j'arrive à afficher cette video plein écran sur un écran de bureau (balise video, avec css video) , dès que je passe sur un écran téléphone toute ma page est décalée. La video occupe toute la largeur de la page et mon contenu dessous est cadré à gauche, avec une grosse partie blanche en-dessous. en effet la video ne se reduit pas au format tel !

Juste pour donner un exemple :
j'ai fait le code sur codepen :
https://codepen.io/yoyochon/pen/vqvwpL

si on réduit l'écran, on voit que la video prend toute la largeur, mais du coup le texte en dessous est décalé à gauche.
La vidéo ne s'adapte pas à la largeur.

Je peux faire une responsive, mais je voudrait que la video occupe systématiquement toute la largeur et hauteur visible de la fenêtre ouverte

notes :
Je développe avec boostrap 4.
La video est en local (balise video)


merci pour votre aide
yo
Modifié par yoyochon (10 Jul 2019 - 11:23)
body{
overflow-x:hidden;
width:100vw
}

video { 
    width: 100vw;     
}


J'ai pas bien compris ce que tu veux exactement mais dis moi ce que tu en penses !
Merci razor de prendre du temps pour moi
j'ai changé le css de codepen, tu peux regarder.

Effectivement, je n'ai plus de décalage en largeur entre la video et le texte en dessous. sur téléphone cela marche bien.
La video devient responsive en réduisant l'écran.

Mais ce que je voudrait en plus c'est qu'elle occupe toute la fenêtre visible de l'écran a chaque fois que l'on réduit ou augmente la fenêtre; et qu'elle soit entiere.
Un peu comme : http://www.arbracam.fr/ (sauf que chez moi leur video sur téléphone ne marche pas)

qu'en penses tu ?
merci
yo
width: 100vw;
 object-fit: cover;


sinon c'est ça que tu veux je pense Smiley cligne à mettre sur ta video
Modifié par 5azor (11 Jul 2019 - 09:52)
Merci à vous deux de m'aider.

1. width: 100vw; object-fit: cover; ne marchait pas
2. Pour le tuto, merci ! cela m'a donné une idée.
Mon problème était du texte en dessous de le video. J'ai donc pris le tuto et enfermé le tout dans un div en css "position:relative". J'ai mis "#video-fond " en absolute pour permettre à du texte de s'afficher en bas.
Et tout marche.
génial !

merci les gars
yo