28111 sujets

CSS et mise en forme, CSS3

[Résolu] Comment avoir une vidéo à height 100% dans un slider

Pages :
Bonsoir,
Je fais suite à mon précédent topic sur la mise en place d'une vidéo dans un slider.
Alors voilà, je n'arrive pas à avoir la vidéo de mon slider à une hauteur de 100%.
Idem pour le mode cover. Les CSS viennent d'Alsa et sont identiques à celles des sites traitant du sujet. Pourtant... rien. La vidéo reste à sa taille réelle.
Auriez-vous une idée du souci ?
Merci beaucoup
Mes CSS
.video {
	height: 100vh !important;
	width: 100vw;
	object-fit: cover;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}

et le HTML
				<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-2">
<video autoplay loop muted="" playsinline="" src="Emeline Fougeray.mp4">
</video></div>		<h2>Regula aurea.</h2>
							<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>

Bonne soirée,
ED
Salut,
c'est dans le code html de la vidéo que tu peux donner une dimension à ta vidéo. Par exemple
width="480" height="360" (sans les valeurs px)
.
Sinon, la vidéo va s'afficher à ses dimensions d'origine, comme elle a été montée. Chez moi, comme j'ai mis poster pour avoir une image autre que la première de la vidéo, l'image poster est aussi de la même dimension, sinon il y a une première image à une dimension et la vidéo qui suit à une autre.
Modifié par Bongota (06 Jun 2022 - 19:12)
Salut Bongota,
Il m'est donc impossible d'avoir une video responsive ? Smiley bawling
Autre souci : impossible de positionner l'image. Dois-je le faire au niveau du HTML ? J'ai tenté un top: -200. Sans succès.
Merci pour ton aide,
ED
Dans ton css, tu devrais avoir ça:
img, object, embed, canvas, video, audio, picture {
       max-width:100%;
       height:auto;
       border:0;}

Ça arrange beaucoup de choses pour le responsive.
Positionner l'image, je ne sais pas, je n'ai pas la vision de ton code. Si c'est le premier code que tu as donné, je suis un peu dépassé par sa complexité Smiley confus
Salut,

Pour le width, c'est simple il faut toujours le mettre à 100%...

Pour la grande problématique de la hauteur :
- avant il fallait mettre un height à 0 et un padding-bottom à 56.25% pour avoir un ratio 16:9, un exemple de cette technique ici.
- maintenant, on peut simplement utiliser la propriété aspect-ratio sur l'élément concerné. Par exemple :
.video {
  aspect-ratio: 16/9;
}

Par contre, cette dernière propriété est récente, attention à la rétrocompatibilité.
Modifié par Olivier C (06 Jun 2022 - 23:17)
Merci à vous, mais rien ne fonctionne, le 'width" et "height" dans le HTML, le positionnement, le responsive (excepté avec le code de Bongota)
img, object, embed, canvas, video, audio, picture {
       max-width:100%;
       height:auto;
       border:0;}

mais je me retrouve avec une toute petite vignette en mode smartphone.
Il est vrai que le code est complexe Smiley murf
Peut-être faut-il penser à abandonner ?
Bonne nuit et encore merci,
ED
La petite vignette, c'est parce que le width n'est pas définit à 100% (en lieu et place du max-width), comme je l'ai préconisé plus haut. Il faut forcer les petites vidéos à prendre toute la place disponible.

"Rien ne fonctionne"... le lien que j'ai donné plus haut "fonctionne" pourtant. Evidemment, il faut adapter au cas de figure ici présent. J'ai du mal à imaginer à partir du papier seulement, mais ça pourrait faire quelque chose comme ceci (avec la deuxième solution) :
video {
  width: 100%;
  aspect-ratio: 16/9;
}

Pour ce qui est de penser à abandonner : on n'est pas tous à égalité devant la persévérance, peut-être la barre est-elle un peu haut pour débuter ? Avant toute chose, il faudrait s’entraîner à manipuler le positionnement en CSS, une maîtrise insuffisante en ce domaine est la cause de bien des maux.
Modifié par Olivier C (07 Jun 2022 - 00:31)
Merci Olivier d'avoir précisé au sujet du max-width. Le fait que ça fonctionne chez moi parce qu'en mode mobile, j'ai redéfini le css en fonction avec le @media.
En effet, ces histoires de dimensions des images et des vidéos sont complexes avec l'arrivée du responsive. Il y a le container de la vidéo, ici un slider. Ensuite il y a la taille originale de la vidéo. Enfin le html qui permet de donner des dimensions.
Abandonner, non, mais peut-être repartir sur un projet plus simple. Définir ses buts précisément et utiliser si possible le code le plus simple pour y arriver. Avancer pas à pas, ne surtout pas empiler les problèmes qui se mordent la queue. Je suis passé par là aussi, des codes copiés ici et là, trop complexes pour mes connaissances. Quand on ne maîtrise pas les %, le placement des images, des vidéos, le JavaScript et qu'on met tout ensemble d'un seul coup, forcément, ça coince.
As-tu déjà défini ce qu tu voulais comme résultat en mettant une vidéo dans un slider ?
Mais il ne faut surtout pas se décourager, le forum est là pour aider.
Bonjour Olivier C,
Je n'abandonne pas facilement Smiley hum
mais là, je dois dire que j'ai TOUT essayé Smiley bawling
Si seulement, il y avait une évolution...
Pour ce qui est du positionnement, j'ai tout essayé aussi Smiley ohwell
Le problème doit être ailleurs, mais où ?
Merci pour ton aide et bonne journée Smiley cligne
ED
Merci Bongota, je n'avais pas vu ton message.
Oui, je vais partir sur du plus simple. Mais c'est dommage, j'avais une idée du résultat Smiley confus
Merci,
ED
Lorsque le problème est complexe, décompose-le. Ce conseil est aussi valable pour le code côté backend. Pour ce qui nous occupe ici, isole le code HTML/CSS qui concerne le problème et fait, par exemple, un CodePen. Déjà tu vas avancer dans ta compréhension du problème rien qu'en faisant cela.
el_debutanti a écrit :
Bonsoir,
Je fais suite à mon précédent topic sur la mise en place d'une vidéo dans un slider.
Alors voilà, je n'arrive pas à avoir la vidéo de mon slider à une hauteur de 100%.
Idem pour le mode cover. Les CSS viennent d'Alsa et sont identiques à celles des sites traitant du sujet. Pourtant... rien. La vidéo reste à sa taille réelle.
Auriez-vous une idée du souci ?
Merci beaucoup
Mes CSS
.video {
	height: 100vh !important;
	width: 100vw;
	object-fit: cover;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}

et le HTML
				&lt;div class="sl-slide" data-orientation="vertical"&gt;
						&lt;div class="sl-slide-inner"&gt;
&lt;div class="bg-img bg-img-2"&gt;
&lt;video autoplay loop muted="" playsinline="" src="Emeline Fougeray.mp4"&gt;
&lt;/video&gt;&lt;/div&gt;		&lt;h2&gt;Regula aurea.&lt;/h2&gt;
							&lt;blockquote&gt;&lt;p&gt;Until he extends the circle of his compassion to all living things, man will not himself find peace.&lt;/p&gt;&lt;cite&gt;Albert Schweitzer&lt;/cite&gt;&lt;/blockquote&gt;

Bonne soirée,
ED


Soit tu écris 
video {
et non 
.video {
soit tu appliques la classe video à ta balise video...

PS : je ne pense pas qu'il soit souhaitable d'avoir un espace dans ton nom de fichier "Emeline Fougeray.mp4"
Modifié par kerlutinoec (07 Jun 2022 - 11:55)
upload/1654613255-48192-capturedaeacran2022-06-07aa16.png
a écrit :
Soit tu écris
video {
et non
.video {
soit tu appliques la classe video à ta balise video...

Bonjour kerlutinoec,
Smiley biggrin ce n'est pas la première fois que ça m'arrive. Il faut que je sois plus vigilant.
Donc voici mon HTML
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img bg-img-2 video">
<video width="1024" height="768" autoplay loop muted="" playsinline="" src="Emeline Fougeray.mp4">
</video></div>		<h2>Regula aurea.</h2>
							<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
						</div>
			  </div>

et mes CSS
.video {
	padding: 200px;
	box-sizing: border-box;
	position: absolute;
	top: -100px;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	background-position: center center;
}
object, embed, canvas, video, audio {
     width:100%;
     height:100%;
     border:0;
}

La vidéo est bien centrée, responsive mais sa taille n'est pas en width 100%.
Je dirais même que la taille est ridicule en mode smartphone.
Vais-je m'en sortir ?
Merci beaucoup à vous,
ED
PS : le .mp4 est là accessoirement, il n'y aura pas d'espace à la fin
Modifié par el_debutanti (07 Jun 2022 - 16:47)
Modérateur
Bonjour/bonsoir,

?? à quoi sert 
padding: 200px;

sur .video ? ça prend déjà 400px de largeur ...

Cdt
Modifié par gcyrillus (07 Jun 2022 - 17:39)
Smiley confused Ce sont les CSS de la démo... qui sont la source du problème Smiley murf
Ça semble évident après coup.
MERCI gcyrillus Smiley lol Smiley lol Par contre, en ne laissant que le height: 100%, le with prend le dessus par défaut. Même si je le retire. Comment avoir la vidéo height :100% avec le visuel de la vidéo centré ?
Soucis à 90% résolu Smiley biggrin
Merci gcyrillus !
Object-fit doit amha être sur vidéo et pas sur son conteneur.
Je mettrais un width: auto pour la vidéo et un overflow: hidden sur le conteneur aussi.
Et pour le centrage object-position: center
Modifié par kerlutinoec (07 Jun 2022 - 18:52)
Merci kerlutionec, c'est bon Smiley lol Je n'y croyais plus Smiley biggrin
Par contre, la video est à left: 0 Smiley murf
Je te donne mes CSS
object, embed, canvas, video, audio {
     min-height:100%;
     border:0;
	 object-fit: cover;
	 width: auto;
	 overflow: hidden;
	 object-position: center;
}

Sinon... PAR-FAIT Smiley lol GE-NIAL !!!!!
Merci !
"overflow: hidden sur le conteneur" il a dit le monsieur Smiley cligne

J'ai pas compris le left:0. Ce n'est pas le cas des autres images ?
J'ai pas fait attention, la video est bien fullscreen mais pas responsive. Et les images du slider sont centrées contrairement à la vidéo Smiley bawling
Mais c'est là... tout proche Smiley cligne
Je ne vois pas trop. Il faudrait qu'on ai la totalité d'un slider fonctionnel avec la video dans un codepen ou autre pour voir.
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à