28172 sujets

CSS et mise en forme, CSS3

[Résolu] Comment centrer un iframe verticalement et horizontalement

Bonjour,
Beaucoup de pages sur cette question, aucune qui s'adapte à mon cas Smiley decu
J'ai une vidéo VIMEO avec laquelle je n'ai aucun souci fullscreen, mais voilà : je souhaiterais la mettre à width : 80%.
J'ai essayé beaucoup de codes, la vidéo n'est jamais centrée... quand elle ne sort pas carrément de la div ! Smiley murf
Avec le dernier code... pire :la vidéo n'apparaît plus !
Le voici :

#movie
{
	width:80%;
	margin:auto;
	padding:auto;
	text-align:center;
	display:table-cell;
}

#salon
{
	width:100%;
	height:100%;
	padding:56.25% 0 0 0;
	position:relative;
}

et le HTML :
<div class="article">  <div id="movie"><iframe id="salon" src="https://player.vimeo.com/video/76764781?h=75c565c7ae&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script></div></div></div>


Où ai-je encore fauté ????

Merci pour votre aide Smiley smile
P.
Modérateur
Bonjour,

1) Tu retires dans le code html l'attribut style="" sur la balise <iframe>. Les styles qui s'y trouvent sont prioritaires sur ceux qui sont dans le css, et ici, bah, ça n'aide pas.

2) Je supprimerais le display: table-cell. Y a que les gens de peu de foi qui emploient ça, et en plus, c'est difficile à gérer !

Amicalement,
upload/1679671614-48192-capturedaeacran2023-03-24aa16.jpg Bonjour parsimonhi Smiley smile
Merci pour ta réponse. C'est mieux, on peut voir la vidéo centrée horizontalement Smiley smile
Mais elle est à bottom: 0 et le width est d'environ 20/25 % au lieu d'être à 100 % Smiley decu
Mais on voit bien le "cadre" width : 80% et un height : 100%.
Une capture pour mieux comprendre Smiley cligne
Merci beaucoup,
P.
Modifié par PLGPPUR (24 Mar 2023 - 16:26)
Modérateur
Bonjour,

Le problème est ailleurs que dans le css (et/ou le html) que tu as fourni.

Avec le css que tu as fourni et en supprimant simplement le display: table-cell; ça marche bien (la vidéo fait bien 80% de son conteneur).

Notes:
- il ne faut pas imposer la hauteur du conteneur, car sinon ce sera contradictoire avec le fait qu'on impose déjà une largeur et une proportion,
- padding: auto ? t'es sûr que ça sert à quelque chose ?

Amicalement,
Rebonjour parsimonhi Smiley cligne
Smiley bawling
Partons alors d'un nouveau code :
      <div class="article"><div class="kern"><div style="padding:75% 0 0 0;"><iframe src="https://player.vimeo.com/video/12345678?h=abcdeabcde&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</div></div>


.kern
{
	width : 80%;
	margin: auto;
	height: 100%;
	position:relative;
	overflow: hidden;
	vertical-align: middle;
	border-style: none;
	display:block;
}

Là, ça fonctionne mais la div ne prend pas toute la hauteur. Smiley murf
Bonne soirée et merci !
P.
Modifié par parsimonhi (25 Mar 2023 - 21:49)
Modérateur
Bonjour,

1) Tu copieras 100 fois : "je n'utiliserai pas l'attribut style dans mes balises html"

2) T'as mis un padding: 75% 0 0 0 au lieu de padding: 56.25% 0 0 0. Or, les proportions de ta vidéo sont telles qu'il faut pour cette vidéo 56.25% et non 75%. Pour d'autres vidéos, ça peut être 75%, mais pas pour celle que tu as donnée en exemple.

Amicalement,
upload/1679767064-48192-capturedaeacran2023-03-25aa18.png Bonjour parsimonhi Smiley smile
J'ai bien copié 100 fois Smiley cligne
Après corrections, la vidéo se retrouve à top: 0 et le fond crème de la div a disparu (pour info, je n'arrive pas à avoir cette div à height:100%. sa hauteur (de la div fond crème) dépend du padding. Une petite capture (pour être plus compréhensible) ou on peut constater que la vidéo est bien centrée verticalement dans la div, mais que la div n'est pas "fullscreen"
Merci et bon werek-end,
P. upload/1679767103-48192-capturedaeacran2023-03-25aa18.png
Modifié par PLGPPUR (25 Mar 2023 - 18:58)
Modérateur
Bonjour,

1) Je n'ai rien compris de tes explications ! Smiley lol

2) Tu veux que quelle div (celle qui a le fond crème ?) fasse 100% de quoi ?

Amicalement,
Bonsoir parsimonhi,
Pardon Smiley confused
Que la div crème soit à height: 100% et la vidéo centrée verticalement dedans.
Problème évoqué hier Smiley murf
Merci et bonne soirée Smiley cligne
P.
Modérateur
Bonjour,

PLGPPUR a écrit :
100% de la hauteur de l'écran


Dans ce cas, il faut envisager d'utiliser l'unité vh (100vh = 100% de la hauteur de l'écran). Et je conseille d'utiliser la propriété min-width au lieu de width car si l'on impose à la vidéo de faire 80% de la largeur de son conteneur, elle peut ne pas avoir assez de place en hauteur pour s'afficher correctement.

Un exemple complet minimal :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
	margin:0;
	padding:0;
	background:#000;
}
.kern {
	width: 80%;
	min-height: 100vh;
	margin: 0 auto;
	display: flex;
}
.iframeContainer
{
	position: relative;
	flex: 1;
	padding: 56.25% 0 0 0;
	background: #cbb2a3;
}
iframe {
	 position:absolute;
	 top:0;
	 left:0;
	 width:100%;
	 height:100%;
	 border:0;
}
</style>
</head>
<body>
<div class="kern">
	<div class="iframeContainer">
		<iframe src="https://player.vimeo.com/video/347119375?h=1699409fe2"></iframe>
	</div>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
</body>
</html>

Amicalement,
Meilleure solution
SUPER !!!
Bonjour parsimonhi,
MERCI !!!!
Mais je me creuse la tête depuis hier pour un autre souci lié à l'iframe :
Sur le code que j'ai posté le 24 Mars à 17:58, ainsi que le dernier que tu as posté (et qui fonctionne Smiley biggrin , je n'ai plus la suite de mon site; contrairement à avant.
J'ai tout vérifié, tout est bien fermé Smiley murf incompréhensible Smiley hum
Aurait-tu une idée ?
En tous cas, encore merci. Bonne fin de week-end,
P.
Modérateur
Bonjour,

PLGPPUR a écrit :
Mais je me creuse la tête depuis hier pour un autre souci lié à l'iframe :
Sur le code que j'ai posté le 24 Mars à 17:58, ainsi que le dernier que tu as posté (et qui fonctionne Smiley biggrin , je n'ai plus la suite de mon site; contrairement à avant.
J'ai tout vérifié, tout est bien fermé Smiley murf incompréhensible Smiley hum
Aurait-tu une idée ?


Tout dépend de ce que tu as dans ta page par ailleurs. Impossible de répondre comme ça.

Amicalement,
J'ai attribué tes CSS à l'Iframe qui ne posait pas de problème et c'est bon Smiley smile
Par contre, qu'est-ce qui fait que la vidéo est centrée verticalement ?
Je tente de faire pareil (ou avec un vertical align) pour des images se trouvant dans le même slider que la vidéo, mais elles restent alignées en haut Smiley ohwell
Dois-je ouvrir une nouvelle discussion ?
Merci encore Smiley cligne
P.
Modérateur
Bonjour,

PLGPPUR a écrit :
Par contre, qu'est-ce qui fait que la vidéo est centrée verticalement ?

C'est un coup de chance que la vidéo soit centrée verticalement ! Smiley lol
PLGPPUR a écrit :
Je tente de faire pareil (ou avec un vertical align) pour des images se trouvant dans le même slider que la vidéo, mais elles restent alignées en haut Smiley ohwell

La propriété vertical-align est rarement la solution. Je te conseillerais presque d'oublier qu'elle existe. Pour centrer verticalement quelque chose voir https://www.alsacreations.com/tuto/lire/1032-Comment-centrer-verticalement-sur-tous-les-navigateurs-.html

Amicalement,
J'ai déjà regardé mais je vais le faire plus minutieusement.
Merci beaucoup parsimonhi, t'es génial Smiley biggrin
Bonne soirée,
P.
Prévenir un modérateur
Répondre au sujet
Aller à