video pleine écran one pageFermé

Question

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 {
    min-width: 100vw; min-height: 100%;} , 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 !

Je me casse la tete et ne comprend plus comment la caler pour que tout s'affiche en 
qui peut m'aider ?

notes :
Je développe avec boostrap 4.
La video est en local (balise video)

Configuration: Macintosh / Chrome 75.0.3770.100

jordane45 · Answer

Bonjour 

Sans voir ton code...difficile de te répondre...
Mais vu que tu utilises boitstrap....j'ose espérer que tu as utilisé  des div class raw, et des col..  bref...le fonctionnement de la grid bootstrap

yoyochon · Answer

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

Video pleine écran one page

2 réponses

Discussions similaires

Newsletters