Video pleine écran one page
yoyochon
-
yoyochon -
yoyochon -
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)
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
A voir également:
- Video pleine écran one page
- Boite gmail pleine - Guide
- Montage video windows - Guide
- Double ecran - Guide
- Supprimer page word - Guide
- Comment télécharger une vidéo youtube - Guide
2 réponses
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
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
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
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