{"id":13714,"date":"2018-12-23T22:10:29","date_gmt":"2018-12-23T22:10:29","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=13714"},"modified":"2025-08-21T13:12:39","modified_gmt":"2025-08-21T13:12:39","slug":"what-is-iframe","status":"publish","type":"post","link":"\/tutorials\/what-is-iframe","title":{"rendered":"What is an iFrame?"},"content":{"rendered":"<p>An inline frame (iFrame) <strong>is an element that loads another HTML element inside of a web page<\/strong>. They are commonly used to embed specific content like external ads, videos, tags, or other interactive elements into the page.<\/p><p>So, you may be wondering how it&rsquo;s done. Chances are the web designer put an iFrame element within that page.<\/p><p>In this article, we will take a closer look at iFrame and how to use it, and talk about other factors worth considering before you put an iFrame into your HTML document.<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-use-iframe\">How to use iFrame<\/h2><p>You shouldn&rsquo;t use iFrame excessively. It can slow down your page and pose a security risk, especially if you use content from a suspicious website. Think about an iFrame as a part of your content, but not part of your site. For example, if you want to add a YouTube video, you can insert an iFrame element to that post.<\/p><p>Now you know that iFrame is an additional element to share content from other sites. You can add it to give context about a certain topic to the readers. You can insert an iFrame element by using the <strong>&lt;iframe&gt;<\/strong> tag in an HTML document. Copy the code below and paste it to notepad, and save the file as <strong>.html<\/strong> format:<\/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 class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"666\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2018\/12\/iframe-example-youtube-code.jpg\/public\" alt=\"Iframe Example\" class=\"wp-image-13724\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2018\/12\/iframe-example-youtube-code.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2018\/12\/iframe-example-youtube-code.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2018\/12\/iframe-example-youtube-code.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2018\/12\/iframe-example-youtube-code.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>The code above will display a YouTube tutorial video by Hostinger. Let&rsquo;s examine each tag separately:<\/p><ul class=\"wp-block-list\">\n<li>The <code>&lt;iframe&gt;<\/code>&hellip;<code>&lt;\/iframe&gt;<\/code> tag is used to contain the video within the iFrame.<\/li>\n\n\n\n<li>The iFrame source <code>(src)<\/code> is the origin of the content from the external or internal server. Don&rsquo;t forget to put the embedded code in the URL.<\/li>\n\n\n\n<li>Width and height is the aspect ratio of the iFrame. You can insert a fixed sizes such as 680&times;480 pixels (px) as in the example. Or, you can use a percentage (10%-100%) based method to adjust the iFrame automatically.<\/li>\n<\/ul><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Suggested Reading<\/h4>\n                    <p> <a href=\"\/tutorials\/iframe-into-wordpress\">How to Embed iFrame Into WordPress<\/a><br>\n<a href=\"\/tutorials\/how-to-embed-video-in-wordpress\/\">How to Embed Video in WordPress<\/a><\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-security-threats-of-using-iframe\">Security threats of using iFrame<\/h2><p>By nature, the iFrame element does not pose any security risk for your web page or your readers. Partly, it was developed to help content makers add visually engaging material to the readers. Nevertheless, you need to pay attention when adding an iFrame from an untrusted site website.<\/p><p>Using iFrames from untrusted or unknown sources can potentially expose your website to various threats, such as <strong>malicious JavaScript<\/strong> or <strong>cross-site scripting (XSS)<\/strong>. These types of attacks redirect visitors to a malicious site, which can then install a virus to the visitors&rsquo; PC or attempt to steal sensitive information. That is why it is not recommended to include iFrame as an integral part of your website.<\/p><p>To reduce risk, websites should:<\/p><ul class=\"wp-block-list\">\n<li>Ensure that external websites are properly secured (e.g., HTTPS, no mixed content).<\/li>\n\n\n\n<li>Only embed content from trusted sources.<\/li>\n\n\n\n<li>Use the <strong>sandbox<\/strong> attribute to restrict actions within the iFrame.<\/li>\n<\/ul><figure class=\"wp-block-image size-full\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-web-hosting\" href=\"\/web-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/public\" alt=\"Hostinger web hosting banner\" class=\"wp-image-98604\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.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>All in all, iFrame is a powerful element if you want more engagement for your visitors. Think of iFrame as part of the content that you make, not as an integral part of your website. <\/p><p>You shouldn&rsquo;t use iFrame excessively though; it is better if you can develop your site without iFrame. If you still need to use it for development purposes, remember only to use content from a trustworthy site. We hope that this article helps you on implementing and understanding iFrame.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An inline frame (iFrame) is an element that loads another HTML element inside of a web page. They are commonly [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/tutorials\/what-is-iframe\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":100,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"What is an iFrame: Definition and Example","rank_math_description":"An iFrame is short for Inline Frame, it is a HTML document used to embed interactive media. Let's look at iFrame and how to use it.","rank_math_focus_keyword":"what is iframe","footnotes":""},"categories":[22607,22601],"tags":[],"class_list":["post-13714","post","type-post","status-publish","format-standard","hentry","category-parts-of-a-website","category-website"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-iframe","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-iframe","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-iframe","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-iframe","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-iframe\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-iframe\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-iframe","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-iframe","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-iframe","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-iframe","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-iframe","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-iframe","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-iframe","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/13714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/users\/100"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/comments?post=13714"}],"version-history":[{"count":29,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/13714\/revisions"}],"predecessor-version":[{"id":132807,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/13714\/revisions\/132807"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/media?parent=13714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/categories?post=13714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/tags?post=13714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}