Video pleine écran one page

- - Dernière réponse :  yoyochon - 10 juil. 2019 à 08:59
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
Afficher la suite 

2 réponses

Messages postés
26552
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2019
1841
0
Merci
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
Commenter la réponse de jordane45
0
Merci
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
Commenter la réponse de yoyochon