Bonjour !
Voila je rencontre un petit problème avec mon code. Je suis débutant et me forme au HTML5
J'ai suivi différents posts qui expliquent comment placer une vidéo en plein écran en background.
Tout fonctionne sans probleme, à l'exception de la taille globale du site sui devient plus haute.
J'ai beau tout tenter depuis hier matin, je ne comprend pas comment fonctionne ce code css qui modifie toute la structure.
mon html :
<div class="video-container">
<video autoplay loop poster="bgfix.png" id="bgvid" class='fillWidth' >
<!--poster="bgfix.png-->
<source src="http://localhost/bg.mp4" type="video/mp4"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<!--[if lte IE 6 ]>
<embed src="http://www.youtube.com/v/_etwz7NkemE&hl=fr" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
<![endif]-->
</div>
mon CSS :
- { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
} vidtop-content {top: 0;
color: #fff;
Sans ces codes, la taille du site est correcte.
J'attend vos conseils avisés !
Merci à tous!
7 réponses
j'ai changé de méthode et cela fonctionne parfaitement avec ce système !
Je vous le fais passer, cela aidera peut etre :
HTML
<video autoplay loop poster="votre image fixe" id="bgvid">
<source src="votre vidéo.mp4" type="video/mp4">
<source src="votre vidéo.webm" type="video/webm"></video>
CSS
video#bgvid {
position: fixed; right: 0; bottom: 0;
margin:0;
padding:0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -1000;
}
Merci à tous !
j'ai changé de méthode, je vous la donne au cas ou cela aiderait quelqu'un d'autre !
HTML :
<video autoplay loop poster="votre image fixe.jpg" id="bgvid">
<source src="votre vidéo.mp4" type="video/mp4">
<source src="votre vidéo.webm" type="video/webm">
</video>
CSS
video#bgvid {
position: fixed; right: 0; bottom: 0;
margin:0;
padding:0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -1000;
}Merci encore !
Salut,
je dirai que c'est à cause des position.
Un élément qui est 'positionné' sort du flux standard où sont les autres éléments, et n'interragit donc plus avec eux.
Si la vidéo n'est PAS positionné, elle "pousse" les autres éléments du site. Sa hauteur est donc prise en compte dans la hauteur du site.
Dès qu'elle est positionné, elle sort du flux, et ne "pousse" plus les autres éléments. Sa hauteur est donc ignoré dans la hauteur du site.
C'est comme si avant d'être positionné, la vidéo pouvait se mouvoir dans seulement 2 dimmensions, de haut en bas (hauteur), et de droite à gauche (largeur), et "bloque" les élément autour d'elle.
Mais dès qu'on la positionne, elle passe dans la 3ème dimmension (profondeur), et ne "gène/bloque" plus les éléments qui étaient atour d'elle.
Ces éléments prennent donc la place qu'occupait la vidéo.
Je n'ai pas du tout compris le problème,
mais si tu veux forcer le site à avoir une hauteur minimum,
tu peux utiliser min-height: 800px sur 'html' et/ou 'body' (je ne sais plus)
change 800 par la valeur que tu préfères
Dans certains cas, on peut préférer min-height: 100vh
Merci beaoucp pour ta réponse rapide ! Effectivement je comprend bien ton explication, mais le fait est que la vidéo en background provoque une déformation des la pages, qui devraient entre responsives.
Les pages sont normalement adaptées au contenu qui est différent dans chacunes. Là, de manière globale, il ya une marge enorme qui existe.
Voiçi l'adresse du site en question, peut etre que cela t'éclaireras !
www.lambertcapron.com
Merci encore!
Je ne comprend pas le problème,
ça à l'air parfaitement responsive, centré, tout ça...
provoque une déformation des la pages
il ya une marge enorme qui existe
Je n'arrive pas à voir de quoi tu parles.
En tous cas c'est super joli, bravo ^^
je te remercie à nouveau pour ta célérité.
Losque tu es sur la premiere page, tu as la possibilité de descendre avec ta souris, faisant monter le menu animé. C'est cela que je ne parviens pas à changer. il y a comme un espace vide en dessous du menu, comme des autres pages que je souhaite supprimer.
Si je retire le bg vidéo, tout est en ordre et la taille de la page est relative au contenu.
Pas quand le bg vidéo est en place... J'ai du rater quelque chose.
Ah d'accord j'ai compris le soucis ^^
(pas encore comment le résoudre...)
Ce code ci,
.video-background {
position: fixed; top: 0; bottom: 0;
}va faire en sorte que .video-background va prendre toute la hauteur du 1er 'ancêtre' positionné (même en 'relative').
C'est peut-être ça, mais j'ai du mal à y voir clair sans avoir tout le code.
Essaie de montrer plus de code (HTML et CSS)
Par contre il est tard chez moi,
je tombe de fatigue je vais dormir,
je reviens plus tard ^^