18041 sujets

Questions générales et questions de débutants

[Résolu] Gestion de l'Iframe de YouTube

Bonjour,
J'ai toujours utilisé mes vidéos sur le site, sur un site que je fais, il faut passer par YouTube et la c'est la catastrophe , et j'ignores pourquoi.
j'en suis venu a faire une page basique


<!DOCTYPE html><html lang='fr'><head> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<style>
iframe {
    border: 1px solid black;
    width: 100%;
    height: 100%;
}
</style>
</head>
<body>
<br />
<iframe   src="https://www.youtube.com/embed/xxxxxxxx" 
 title="xxxxxxxxxxxxxxxx" frameborder="0" 
 allow="accelerometer; autoplay; clipboard-write; encrypted-media; allowfullscreen"></iframe>
<br /><br /><br />
</body></html>

Résultat catastrophique impossible de maitriser taille et emplacement !
Alors si vous pouviez me débloquer ce serait super .
Et en plus cela doit être simple Smiley decu
Merci d'avance
Modifié par Fox-infograp (01 Nov 2022 - 02:41)
Question bête, mais je ne savais pas qu'il suffisait de mettre
la taille minimale et il gère tout seul la Responsivité . Smiley rolleyes
Meilleure solution
Fox-infograp a écrit :
... il suffisait de mettre
la taille minimale et il gère tout seul la Responsivité . Smiley rolleyes

Normalement non, c'est donc que votre iframe doit être définie à width:100% quelque part dans vos styles.

D'autre part il peut être bien d'imposer un ratio car, si ça passe pour une vidéo unique, le rendu peut être affreux au sein d'une grille avec de multiples vidéos. Dans ce cas il faudrait donc faire par exemple :
.video-youtube {
    aspect-ratio: 16/9;
}

Exemple en ligne : Vidéos.
Modifié par Olivier C (03 Nov 2022 - 14:23)
Sujet clos
Aller à