Video Html5 Responsive

Version imprimable

17/12/2016, 01h18
cedche99

Video Html5 Responsive
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:

1 2 3 4 5 nav { position: fixed; bottom: 0; min-width: 100%; }
voici mon code pour la vidéo:
Code:

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
17/12/2016, 08h08
Invité

Bonjour,

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

Code html

Bonjour,

Désolé, Voici le code html correspondant

Code:

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

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:

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.