26369 sujets

CSS et mise en forme, CSS3

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;
}

Smiley smile

edit : uniquement en version mobile évidement
Modifié par Yordi (10 Jul 2018 - 16:15)
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 ?