{"id":47200,"date":"2026-03-19T17:54:51","date_gmt":"2026-03-19T17:54:51","guid":{"rendered":"\/fr\/tutoriels\/?p=47200"},"modified":"2026-03-19T18:10:49","modified_gmt":"2026-03-19T18:10:49","slug":"quest-ce-qu-un-iframe","status":"publish","type":"post","link":"\/fr\/tutoriels\/quest-ce-qu-un-iframe","title":{"rendered":"Qu&rsquo;est-ce qu&rsquo;un iframe"},"content":{"rendered":"<p>Un cadre en ligne (iFrame) est<strong> un &eacute;l&eacute;ment qui charge un autre &eacute;l&eacute;ment HTML &agrave; l&rsquo;int&eacute;rieur d&rsquo;une page web<\/strong>. Ils sont g&eacute;n&eacute;ralement utilis&eacute;s pour int&eacute;grer des contenus sp&eacute;cifiques tels que des publicit&eacute;s externes, des vid&eacute;os, des balises ou d&rsquo;autres &eacute;l&eacute;ments interactifs dans la page.<\/p><p>Vous vous demandez peut-&ecirc;tre comment cela se passe. Il y a de fortes chances que le concepteur du site ait plac&eacute; un &eacute;l&eacute;ment iFrame dans cette page.<\/p><p>Dans cet article, nous allons examiner de plus pr&egrave;s l&rsquo;iFrame et la mani&egrave;re de l&rsquo;utiliser, ainsi que d&rsquo;autres facteurs &agrave; prendre en compte avant d&rsquo;ins&eacute;rer une iFrame dans votre document HTML.<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-use-iframe\">Comment utiliser iFrame<\/h2><p>Vous ne devez pas utiliser iFrame de mani&egrave;re excessive. Il peut ralentir votre page et pr&eacute;senter un risque pour la s&eacute;curit&eacute;, en particulier si vous utilisez du contenu provenant d&rsquo;un site web suspect. Consid&eacute;rez une iFrame comme une partie de votre contenu, mais pas de votre site. Par exemple, si vous souhaitez ajouter une vid&eacute;o YouTube, vous pouvez ins&eacute;rer un &eacute;l&eacute;ment iFrame dans cet article.<\/p><p>Vous savez maintenant que l&rsquo;iFrame est un &eacute;l&eacute;ment suppl&eacute;mentaire permettant de partager du contenu provenant d&rsquo;autres sites. Vous pouvez l&rsquo;ajouter pour donner aux lecteurs le contexte d&rsquo;un certain sujet. Vous pouvez ins&eacute;rer un &eacute;l&eacute;ment iFrame en utilisant la balise <strong>&lt;iframe&gt;<\/strong> dans un document HTML. Copiez le code ci-dessous et collez-le dans le bloc-notes, puis enregistrez le fichier au format <strong>.html<\/strong> :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/dXBohfjc4WA\" width=\"680\" height=\"480\" allowfullscreen&gt;&lt;\/iframe&gt;<\/pre><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f9b5314c204\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" width=\"900\" height=\"666\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/03\/iframe-exemple-youtube-code.jpg\/public\" alt=\"Exemple d'Iframe\" class=\"wp-image-47199\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/03\/iframe-exemple-youtube-code.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/03\/iframe-exemple-youtube-code.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/03\/iframe-exemple-youtube-code.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/03\/iframe-exemple-youtube-code.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Le code ci-dessus affiche une vid&eacute;o tutoriel YouTube r&eacute;alis&eacute;e par Hostinger. Examinons chaque &eacute;tiquette s&eacute;par&eacute;ment :<\/p><ul class=\"wp-block-list\">\n<li>La balise <code>&lt;iframe&gt;<\/code>&hellip;<code>&lt;\/iframe&gt;<\/code> est utilis&eacute;e pour contenir la vid&eacute;o dans l&rsquo;iFrame.<\/li>\n\n\n\n<li>La source de l&rsquo;iFrame <code>(src)<\/code> est l&rsquo;origine du contenu du serveur externe ou interne. N&rsquo;oubliez pas de mettre le code int&eacute;gr&eacute; dans l&rsquo;URL.<\/li>\n\n\n\n<li>La largeur et la hauteur correspondent au rapport d&rsquo;aspect de l&rsquo;iFrame. Vous pouvez ins&eacute;rer une taille fixe telle que 680&times;480 pixels (px) comme dans l&rsquo;exemple. Vous pouvez &eacute;galement utiliser une m&eacute;thode bas&eacute;e sur un pourcentage (10%-100%) pour ajuster l&rsquo;iFrame automatiquement.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-security-threats-of-using-iframe\">Risques de s&eacute;curit&eacute; li&eacute;s &agrave; l&rsquo;utilisation de l&rsquo;iFrame<\/h2><p>Par nature, l&rsquo;&eacute;l&eacute;ment iFrame ne pr&eacute;sente aucun risque pour la s&eacute;curit&eacute; de votre page web ou de vos lecteurs. Il a &eacute;t&eacute; d&eacute;velopp&eacute; en partie pour aider les cr&eacute;ateurs de contenu &agrave; ajouter des &eacute;l&eacute;ments visuellement attrayants pour l&rsquo;engagement des lecteurs. N&eacute;anmoins, vous devez faire attention lorsque vous ajoutez une iFrame &agrave; partir d&rsquo;un site web non fiable.<\/p><p>L&rsquo;utilisation d&rsquo;iFrames provenant de sources non fiables ou inconnues peut potentiellement exposer votre site web &agrave; diverses menaces, telles que le <strong>JavaScript malveillant<\/strong> ou le <strong>cross-site scripting (XSS)<\/strong>. Ces types d&rsquo;attaques redirigent les visiteurs vers un site malveillant, qui peut alors installer un virus sur le PC des visiteurs ou tenter de voler des informations sensibles. C&rsquo;est pourquoi il n&rsquo;est pas recommand&eacute; d&rsquo;inclure l&rsquo;iFrame comme partie int&eacute;grante de votre site web.<\/p><p>Pour r&eacute;duire les risques, les sites web doivent<\/p><ul class=\"wp-block-list\">\n<li>Veillez &agrave; ce que les sites web externes soient correctement s&eacute;curis&eacute;s (par exemple, HTTPS, pas de contenu mixte).<\/li>\n\n\n\n<li>N&rsquo;int&eacute;grez que du contenu provenant de sources fiables.<\/li>\n\n\n\n<li>Utilisez l&rsquo;attribut <strong>sandbox<\/strong> pour restreindre les actions au sein de l&rsquo;iFrame.<\/li>\n<\/ul><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/public\" alt=\"\" class=\"wp-image-41467\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>En r&eacute;sum&eacute;, l&rsquo;iFrame est un &eacute;l&eacute;ment puissant si vous souhaitez accro&icirc;tre l&rsquo;engagement de vos visiteurs. Consid&eacute;rez l&rsquo;iFrame comme une partie du contenu que vous cr&eacute;ez, et non comme une partie int&eacute;grante de votre site web.<\/p><p>Vous ne devez cependant pas utiliser iFrame de mani&egrave;re excessive ; il est pr&eacute;f&eacute;rable que vous puissiez d&eacute;velopper votre site sans iFrame. Si vous devez tout de m&ecirc;me l&rsquo;utiliser &agrave; des fins de d&eacute;veloppement, n&rsquo;utilisez que du contenu provenant d&rsquo;un site digne de confiance. Nous esp&eacute;rons que cet article vous aidera &agrave; mettre en &oelig;uvre et &agrave; comprendre iFrame.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un cadre en ligne (iFrame) est un &eacute;l&eacute;ment qui charge un autre &eacute;l&eacute;ment HTML &agrave; l&rsquo;int&eacute;rieur d&rsquo;une page web. Ils sont g&eacute;n&eacute;ralement utilis&eacute;s pour int&eacute;grer des contenus sp&eacute;cifiques tels que des publicit&eacute;s externes, des vid&eacute;os, des balises ou d&rsquo;autres &eacute;l&eacute;ments interactifs dans la page. Vous vous demandez peut-&ecirc;tre comment cela se passe. Il y a [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/quest-ce-qu-un-iframe\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":355,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Qu'est-ce qu'un iFrame : d\u00e9finition et exemple","rank_math_description":"Un iFrame (Inline Frame) est un document HTML pour int\u00e9grer du contenu interactif. D\u00e9couvrez ce que c\u2019est et comment l\u2019utiliser.","rank_math_focus_keyword":"qu'est-ce qu'un iframe","footnotes":""},"categories":[4804],"tags":[],"class_list":["post-47200","post","type-post","status-publish","format-standard","hentry","category-developpement-site-web"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/47200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/355"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=47200"}],"version-history":[{"count":4,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/47200\/revisions"}],"predecessor-version":[{"id":47345,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/47200\/revisions\/47345"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=47200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=47200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=47200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}