Iframe Youtube carré (mais à 100% Width)

Bonjour tout le monde,

J'ai besoin de vos lumières concernant un bout de code sur lequel je patine depuis quelques temps.

J'ai une vidéo youtube au format carré et j'ai besoin de l'intégrer à un site au format carré également (16/9 est par défaut).

J'ai pu avec le code fourni par Youtube (embed) changer les width & height pour avoir un carré parfait mais en absolu (984x984 pour l'exemple).

La version web desktop du site fonctionne nickel mais la version mobile (iPhone en tout cas, je n'ai pas testé les autres mobiles) réduit la taille des éléments (c'est fait sur Wordpress) et la taille en absolu de 984x984 sort du cadre forcément.

J'ai rajouté une ligne CSS dans le theme indiquant :

iframe {width:100%;}

Ca me cale bien la largeur sur la largeur du template sur la version desktop et mobile sauf que je perds mon ratio de 1:1 (carré).

Comment puis-je faire pour garder une iframe carrée tout en étant en 100% de largeur ?

Merci pour votre aide.

Une idée serait peut-être de donner :

iframe{
	width: 100vw;
	height: 100vw;
}

edit : uniquement en version mobile évidement
Modifié par Yordi (10 Jul 2018 - 16:15)

Pour faire un carré responsive il faut mettre une hauteur à 0 et jouer avec un padding, exemple padding-bottom, avec une valeur de 100% dans ce cas précis.
Là est le secret...
Ratios examples (scriptura framework)

Merci pour vos réponses.
J'ai testé les deux solutions.

@Yordi : Comment puis-je mettre une condition dans le CSS pour les mobiles ?

@Olivier C : L'iframe Youtube n'a pas l'air d'aimer le :

height:0; padding-bottom:100%;

En effet, la taille me semble nickel mais l'iframe est vide. Est-ce un pb de Youtube qui n'aime pas ce genre de manip ?

Ça marche avec YouTube (exemple de players). Essayez avec un élément conteneur (édit : il s'agit en fait de la même solution qu'aliasdmc).
Modifié par Olivier C (11 Jul 2018 - 05:36)

Excellent !
Merci beaucoup Aliasdmc et Olivier C.

Bonne journée à vous.