28172 sujets

CSS et mise en forme, CSS3

Background + vidéo, décalage..

Bonjour à tous,

Je suis un grand débutant dans le domaine HTLM/CSS. Je me base sur beaucoup de vos tutoriels et des tutoriels vidéo. Cependant, depuis peu, je souhaiterai faire de mon background sur mon site une vidéo animée.

Cependant, je ne souhaite pas que avoir une video, je souhaite que celle-ci s'accorde avec le fond d'écran, comme sur ce site de jeu :

http://www.dofus.com/fr

Vous remarquerez la présence de la vidéo et de l'arrière plan en fond. Ce qui rend en quelque sorte une partie de l'arrière plan animé (pour essayer de se faire comprendre) ^^'

J'ai réussi à mettre en place la vidéo et l'arrière plan. Dans ma résolution d'écran, je n'ai aucun soucis au niveau de l'apparence.

Cependant, lorsque je fais un zoom arrière ou encore un zoom avant pour voir les différentes résolutions des utilisateurs, un décalage apparait :

Avec la résolution de mon écran :

http://puu.sh/iwnOs/6f4bc6c45a.jpg


En dé-zoomant :

http://puu.sh/iwnVN/fd07b37e10.jpg


J'ai essayé de reproduire ce que je trouvais sur le site officiel, mais rien à faire.. C'est pour ça que je me tourne vers vous pour éventuellement trouver une aide..

En vous remerciant Smiley smile
Bonjour,

Notez que la vidéo du site Dofus ne prend pas toute la page, ceci afin de limiter le poids global de la page :

upload/35007-Dofus.jpg

Dans l'encart en bas à droite (inspection de l'élément ; [Ctrl][Maj] + [J] pour Chrome), vous avez les règles css appliquées à cette vidéo :
video {
  display: block;
  width: 100%;
  margin: 0 auto;
  background-size: 100%;
}

La règle importante ici, pour le centrage d'un élément block, est margin: 0 auto. Notez aussi le width 100% pour le responsive.

Pour ce qui est du décalage avec votre image il faudrait que nous en sachions plus sur votre code. Un exemple en ligne...
Modifié par Olivier C (22 Jun 2015 - 07:32)
Bonjour,

Désolé de la réponse quelque peu tardive, je n'étais pas présent ces derniers jours..

En ce qui concerne le code :

htlm :

<p><video src="img/vid/vid2.mp4" autoplay="true" muted="true" loop="loop" class="video"></video></p>


et en ce qui concerne le CSS :

.video {
display: block;
width: 79%;
margin: 0px 114px -81px; /* J'étais obligé de la placer de cette façon pour qu'elle sadapte à mon BG */
padding: 0px;
position: float;
}


Mon BG :

body > .body_top {
background: url("../img/body_top/cloud.jpg") 48% 0 no-repeat #000000;
}


En vous remerciant de votre réponse Smiley smile
Sujet clos
Aller à