18041 sujets

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

Mettre une bordure sur un IFRAME

Bonjour!

En insérant une vidéo Youtube dans une page, j'ai mis un texte en float à gauche de cette vidéo.
Mais comment faire pour avoir une bordure autour de l'image?
Malgré les marginwidth et marginheight, ça ne fait rien!

Voici le Html: 
<iframe width="640" height="360" style="float:right" src="https://www.youtube.com/embed/An2OWZH2guE" frameborder=1 marginwidth = "15px" marginheight="15px" allowfullscreen></iframe>texte.................


Merci pour votre aide.
Modifié par abeille (09 Mar 2016 - 10:52)
Modérateur
Salut,

Et bien tout simplement en ajoutant un border en CSS... non ?
<iframe width="640" height="360" class="frame" src="https://www.youtube.com/embed/An2OWZH2guE" allowfullscreen></iframe>

.frame {
  border: 4px solid pink;
}

-> https://fiddle.jshell.net/6g65ztbq/

ou alors j'ai loupé une marche...
Bonjour Abeille,

Pour commencer tu peux nettoyer ta balise iframe car frameborder, marginwidth/height ne sont plus valides en Html5 (si c'est bien le doctype que tu utilises) (W3 Schools - iFrame Tag - en anglais).

D'autre part il ne faut pas confondre marge (margin) et bordure (border). Le premier est un espace vide là où le second est une décoration.

Sinon, comme le dis _laurent, il n'y a aucune raison pour que la propriété css qui va bien ne fonctionne pas sur un iframe.

Un exemple sur Codepen.

Bonne journée.
Modifié par Greg_Lumiere (09 Mar 2016 - 12:15)
_laurent a écrit :
Salut,

Et bien tout simplement en ajoutant un border en CSS... non ?

ou alors j'ai loupé une marche...
Adio Laurent, merci pour ton explication, non tu n'as pas loupé une marche...c'est parfait.
Merci. Smiley biggrin
Modifié par abeille (09 Mar 2016 - 12:29)
Greg_Lumiere a écrit :
Bonjour Abeille,

Pour commencer tu peux nettoyer ta balise iframe car frameborder, marginwidth/height ne sont plus valides en Html5 (si c'est bien le doctype que tu utilises) (W3 Schools - iFrame Tag - en anglais).
Adio Grg, merci pour le conseil.
Mais c'est un problème ça, comment savoir si les balises sont valables ou dépréciées?
ça change souvent ça?
Non ça ne change pas souvent. Seulement lors d'une évolution majeure aka changement de version.

Les propriétés que je te cite plus haut correspondent à du html 4. Le html pour lequel il fallait déclarer un doctype long comme le bras.

Depuis 2014 il n'y a pas eu de changement de version et donc pas de nouvelles balises ou propriétés dépréciées et il fallut 3 ans au W3C pour produire cette version aboutie. Donc rassure toi html6 n'est pas prêt de sortir et quand il le fera de toute façon tu entendras parler des changement incorporés (ou substitués) de la version précédente.

Le liens que je t'ai fournis (W3 Schools) est à considérer comme une Bible ! Une référence vers laquelle se tourner en priorité.
Il en existe d'autres bien sûr, en vrac je pense à Mozilla MDM, Microsoft aussi entretient une bonne source de renseignements et bien sûr le W3C lui-même qui brille par sa faculté à tout rendre abstrait et limite incompréhensible (je m'écarte du sujet là).

En cas d'avis contradictoire, il ne faut pas oublier que les normes sont établies/validées par le W3C donc autant prendre ses renseignements auprès du Bon Dieu qu'auprès de ses Saints.
Modifié par Greg_Lumiere (09 Mar 2016 - 12:41)
Sujet clos
Aller à