Discussion :

[cedche99]

Bonjour,

Je suis en train de concevoir un site internet, sur la page d'accueil j'aimerai avoir un vidéo qui prend l'ensemble de l’écran (balise vidéo) avec le menu du site situé en bas de la vidéo.

voici mon code pour mon menu:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
nav {
  position: fixed;
  bottom: 0;
  min-width: 100%;
}

voici mon code pour la vidéo:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
video{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  margin: 0 auto;
}

Malheureusement, je rencontre un problème lorsque mon site devient responsive, la vidéo ne s'affiche pas correctement on voit que la partie gauche de la vidéo (selon la taille du device).

J'aimerai savoir si il est possible d'afficher en entier la vidéo ou si ce n'est pas possible que au moins le centre de la vidéo soit affiché et non la partie gauche ?

Merci d'avance,
cedche99

[Invité]

Bonjour,

Dans le forum CSS, un code CSS n'a d'intérêt qu'AVEC le code HTML associé.

[cedche99]

Bonjour,

Désolé, Voici le code html correspondant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<header>
		<video src="./assets/videos/backgroundVideo.mp4" loop autoplay></video>
		<nav id='cssmenu'>
			<div class="logo"><a href="index.html">TastyCook </a></div>
			<div id="head-mobile"></div>
			<div class="button"></div>
			<ul>
				<li class='active'><a href='#'>ACCUEIL</a></li>
				<li><a href='#'>TEMPS</a></li>
				<li><a href='#'>PERSONNES</a></li>
				<li><a href='#'>INGREDIENTS</a></li>
				<li><a href='#'>CALORIES</a></li>
			</ul>
		</nav>
	</header>

cedche99

[Cyberdome]

Essayez de retirer le position:fixed; de l'élément video.

A moins que vous ne vouliez faire défiler votre site devant la vidéo, auquel cas je n'ai pas la solution.

Accesoirement si vous voulez valider en html5 votre syntaxe est erronée. La source doit se trouver dans une balise source comprise entre les balises vidéos. Ce qui vous permet en plus de mettre votre vidéo en différents formats ainsi qu'un embed au cas ou le lecteur html5 ne serait pas implémenté.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<video width=" " height=" ">
        <source src="mavideo.mp4" type="video/mp4">
        <source src="mavideo.flv" type="video/flv">
 
        <object data="file.mp4" width=" " height=" "> 
  	        <embed src="file.mp4" width=" " height=" "> 
   	</object> 
</video>

Ainsi si vous tombez sur un navigateur qui ne prend pas en charge la vidéo html 5 il prendra le embed.