What is an iFrame? How to Embed Content Using HTML iFrames

Key highlights 

• Learn the basics of the <iframe> tag and how it lets you display external content within your web page. 
• See how iFrames embed YouTube videos, maps, forms and tools right into your website. 
• Follow best practices for embedding with iFrames, including responsive design and security tips. 
• Understand what these attributes control and how they impact performance, security and user experience. 
• See how we, at Bluehost, make it simple to add iFrames with our website builder or WordPress. 

Ever wondered how websites display YouTube videos, Google Maps or online forms without hosting that content themselves? The answer lies in a powerful yet simple HTML element—the iFrame. 

So, what is an iFrame? Short for “inline frame”, it’s an HTML tag used to embed another web page or HTML document directly within your own. It’s a simple way to embed third-party content like videos, forms or maps without touching the external site’s code. 

If you’re a beginner, the idea of using an iFrame may seem a bit technical. But with the right guidance, it’s surprisingly easy to use and incredibly useful. Whether you want to embed YouTube videos, display maps or load widgets, understanding iFrame usage in web development can seriously upgrade your site’s interactivity. 

In this guide, we’ll explain how the iFrame element works, show a basic iFrame HTML example and walk you through essential iFrame attributes and usage tips. You’ll also learn how we, at Bluehost, make it simple to embed and manage content with iFrames, no coding required. 

What is an iFrame in HTML? 

An iFrame is an HTML element used to embed another HTML document within the current web page. Think of it like a window that displays another website or piece of content without forcing the visitor to leave your site. 

The iFrame is created using the <iframe> tag in HTML. It’s widely used to embed videos, display external content or show interactive tools directly on your page. With a simple snippet of code, you can pull in a YouTube video player, a Google Maps location or even an entire web page hosted on another server. 

Here’s a breakdown of how it works: 

• The ‘src’ attribute points to the URL of the page you want to display. 
• You can set width and height attributes to control the frame’s size. 
• The iFrame sits inside your current HTML layout and becomes part of the user’s browsing context. 

Now that you know what an iFrame is, and how it works, let’s explore how you can use it to embed useful and engaging content on your site. 

Also read: What is a URL? Its Structure, Syntax and SEO Best Practices 

What are the most popular use cases for iFrames? 

iFrames are incredibly versatile and work well for blogs, eCommerce sites or portfolios. They allow you to embed content from other websites without writing complex code or sending visitors to a new window. Let’s look at some of the most common and effective ways to use them: 

1. Embedding videos 

One of the most popular uses of the iFrame tag is to embed YouTube videos on a page. You can paste the YouTube embedded URL in the ‘iframe src’ attribute to display content like tutorials, music or webinars directly on your site. 

Example: 

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe> 

This is perfect for enhancing your content without increasing the page size too much. 

2. Displaying maps or docs 

Need to share a Google Maps location or an online document? You can use an iFrame to display content from tools like Google Docs, Sheets or Maps inside your page. This use is common on business directories and contact pages. 

3. Integrating external tools 

From forms and surveys to booking widgets and chatbots, iFrames let you embed a wide range of tools into your site. This is especially useful when the content is hosted on another platform. It’s often used to embed payment forms, sign-up modules or calculators. 

4. Showcasing social media posts 

You can also use iFrames to embed social media feeds or posts, such as Facebook videos or Instagram stories. This lets visitors see fresh content in real time without needing to visit other websites. 

5. Live-streaming and webinars 

If you’re hosting a live event, you can embed a YouTube video, zoom session or webinar player using the iframe HTML. This keeps your audience engaged on your own site during live broadcasts. 

Now that you’ve seen how flexible iFrames can be, let’s look at a simple iFrame example you can copy and use right away on your web page. 

Basic iFrame HTML example (copy + paste) 

If you’re new to coding, don’t worry. Here’s a basic iFrame HTML example that you can copy, paste and customize for your own web page. This example uses a YouTube video, but you can replace the ‘iframe src’ URL with any external content you’d like to embed. 

<iframe  
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"  
  width="560"  
  height="315"  
  frameborder="0"  
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"  
  allowfullscreen> 
</iframe> 

Here’s what each part does: 

• src: The URL of the page or media you want to display (called the iFrame source). 
• width and height: These attributes define the size of your iFrame. 
• frameborder: Use 0 to remove the border around the frame. 
• allowfullscreen: Enables full screen mode for video players. 

This iFrame is used to display a video, but you can also point it to maps, documents, forms or other pages using the appropriate src. 

Tip: Always make sure the iFrame src uses HTTPS to avoid mixed content issues on your HTML page. 

Now that you’ve seen an example, let’s explore key iFrame attributes and how they control your content’s behavior, look and security. 

What are the key iFrame attributes and what do they control? 

When embedding content with iFrames, each attribute plays a key role in controlling how the content looks, loads and behaves. From setting dimensions to enhancing security and accessibility, these attributes help ensure your embeds are smooth, safe and responsive. 

Whether you’re adding a video, map or form, the right settings can make your iFrame content blend seamlessly into your site. 

Here’s a quick-reference table of the most essential iFrame attributes: 

Attribute	Description	Example
src	Source URL for the iFrame	src=”https://[example].com”
loading	Lazy load for performance	loading=”lazy”
sandbox	Restricts iFrame permissions	sandbox=”allow-scripts”
allow	Grants specific permissions to iFrame	allow=”fullscreen; autoplay”
target	Defines where links open from iFrame	target=”_blank”
width	Sets iFrame width	width=”560″
height	Sets iFrame height	height=”315″
frameborder	Controls the frame’s border	frameborder=”0″
title	Describes content for screen readers	title=”YouTube video player”
name	Assigns a name to the iFrame	name=”map_iframe”

Let’s explore the most common and important ones in detail: 

1. src, height, width, frameborder 

• Src (source): This is the most critical part of an iFrame. The src attribute specifies the URL of the page or content you want to embed. For example, a YouTube embed URL or a Google Maps location. Always use secure links starting with ‘https://’ to avoid browser warnings. 
• Width and height: These control how much space the iFrame takes up on your web page. Adjust these values to match the layout of your site. Many modern developers also use aspect ratio and responsive CSS styling to make iFrames mobile-friendly. 
• Frameborder: This controls whether there’s a border around the iFrame. A value of 0 removes the border, giving your embedded element a cleaner look. 

These core attributes are typically the first adjustments web developers make when embedding content with an iFrame. 

2. Sandbox, allow, target, loading (Lazy load) 

• Sandbox attribute: Limits what the embedded content can do. It can block scripts, prevent forms from submitting and stop pop-ups from opening. You can also selectively enable features like allow-forms, allow-scripts or allow-popups for specific functionality. This is essential to reduce the risk of malicious content. 
• Allow attribute: Grants permissions to the iFrame, which include fullscreen, autoplay or camera. This works in tandem with sandbox settings to let you control what embedded content can access. 
• Target attribute: Often used when linking within an iFrame. The target attribute determines where the linked document opens. It can be in the same frame, a new tab or a designated target frame on your site. 
• Loading attribute: Controls how the iFrame loads on your page. Setting it to “lazy” delays loading until the user scrolls to it, helping improve page performance and speed. This is especially useful when embedding external content like entire web pages or large media files. 

iFrames are packed with flexible options, but using these attributes correctly is key to a seamless and secure experience. 

Now let’s look at how to optimize iFrame usage for better performance, accessibility and browser compatibility. 

What are the best practices for using iFrames on your site? 

While iFrames are easy to use, they can lead to security risks, layout issues or slow load times if not implemented properly. Below are best practices to help you use the iFrame element safely and efficiently across your HTML content: 

1. Responsiveness and accessibility 

Modern websites need to look great on all devices. iFrames can pose challenges for responsive design. To ensure your embedded content scales with screen size: 

• Use CSS styles like ‘width: 100%’ and maintain an aspect ratio with padding. 
• Add the title attribute to describe the content for screen readers. This improves accessibility. 

Example: 

<iframe src="..." title="YouTube video player"></iframe> 

2. Avoiding security issues and load errors 

Use the sandbox attribute to control how the iFrame behaves and helps avoid malicious content. Only allow permissions that are essential. Always: 

• Stick to ‘https’ in the iFrame src for secure embedding. 
• Set appropriate values for referrer policy and allow to avoid unwanted tracking or pop-ups. 

3. Style with CSS for a seamless look 

Instead of using outdated HTML attributes like frameborder, you can style iFrames with CSS. This gives you more control over appearance: 

• Use the CSS border property to customize or remove borders. 
• Set padding, margin and alignment with style attributes or external stylesheets. 

4. Use descriptive fallback content 

If the external resource fails to load or is blocked by a browser, fallback text can help users understand what they’re missing. Place text between the opening and closing <iframe> tags like this: 

<iframe src="...">Your browser does not support iFrames. Please visit the original page.  

</iframe>

Now let’s look at how to optimize iFrame usage for better performance, accessibility and browser compatibility. 

5. Test on all devices and browsers 

Since iFrames rely on external content, behavior can vary depending on: 

• The browser (some features may be restricted) 
• The device (responsiveness issues may arise) 
• The source site’s settings (some pages prevent embedding) 

Always test how the iFrame appears and behaves across multiple environments, especially when embedding content from other websites or using plugins. 

We’ve now covered the best practices for using iFrames on your site. Next, let’s look at how we, at Bluehost, make it easy to add iFrames using our AI Website Builder and WordPress tools without any coding skills.  

How Bluehost makes embedding with iFrames easy? 

Embedding with iFrames is simple, but only if your website platform supports full HTML customization and loads content quickly. That’s where Bluehost shines. Whether you’re using WordPress or a drag-and-drop AI Website Builder, we give you the flexibility, tools and performance to embed external content without hassle. 

Here’s how Bluehost makes it easy: 

Step 1: Choose the right Bluehost plan 

Start by selecting a hosting plan that fits your needs: 

• Shared hosting: Great for beginners who want to build a personal or business site with basic HTML support. 
• WordPress hosting: Ideal for users who want flexibility, plugins and custom blocks for embedding. 

As part of your setup, make sure your free SSL certificate is activated. So, all your iFrame content loads securely over HTTPS, preventing browser warnings and enabling modern embeds. 

No matter which plans you choose, you’ll have full support for the iFrame tag, external media and responsive design. 

With Bluehost, you get the tools to embed media, use iFrames and design freely, no technical hassle. 

Want to embed videos, maps or forms on your site? Build your WordPress site with Bluehost and start embedding content in minutes. 

Step 2: Access the website builder or WordPress dashboard 

Once you’re set up, log in to your Bluehost Account Manager and access your preferred site editing environment: 

• Our AI-powered builder, WonderSuite, lets you visually design your site and insert iFrames using a simple Custom HTML block. 
• If you’re using the Gutenberg (Block) Editor, click the “+” icon, select Custom HTML and paste your iFrame code. 
• And, if you’re using the Classic Editor, switch to the “Text” tab and paste the iFrame code directly. 

No matter which option you choose, you’ll have full control over how your iFrame element displays on your page. 

Step 3: Use an HTML block to paste iFrame code 

In your chosen editor: 

• Add a Custom HTML block 
• Paste the full iFrame snippet, like: 

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" allowfullscreen></iframe> 

• Update the iFrame src to match the URL of the page or external resource you want to embed. For example, a YouTube video player, Google Maps or a survey tool. 

This allows you to display content from other websites right inside your own. 

Also read: How to Add HTML to a Website Builder for WordPress 

Step 4: Customize appearance and size 

Now that your iFrame is placed, it’s time to make it fit beautifully into your site layout: 

• Adjust the width and height attributes to control how the iFrame displays on different screen sizes. 
• Use the style attribute or external CSS for more control. Remove the border around the frame, apply padding or center-align the element. 
• If you’re using WonderTheme, your site will already be optimized for responsive layout, so your iFrames will adapt well to all screen sizes automatically. 

Step 5: Use plugins for advanced iFrame functionality (WordPress only) 

Want more control? Install plugins like: 

• Advanced iFrame: Customize scrollbars, security, lazy loading and size. 
• EmbedPress: Embed 100+ content types (videos, docs, maps, etc.) with a single block. 
• iFrame Shortcode: Add iFrame content to posts and widgets using short codes. 

These plugins are fully supported in Bluehost’s optimized WordPress environment. 

Step 6: Optimize for performance and SEO 

To ensure your site runs fast and is search-friendly: 

• Add the loading=”lazy” attribute to delay loading until the iFrame scrolls into view. 
• Use the title and name attributes for accessibility and improved SEO metadata. 
• Set proper sandbox and allow settings to reduce security risks while enabling specific functionality like full screen, forms or popups. 
• Use Yoast SEO, which comes pre-installed with our WordPress hosting, to optimize the page containing your iFrame. It helps search engines understand your content better and enhances the overall user experience. 

Step 7: Publish and test your page 

Before going live: 

• Preview your page on desktop and mobile. 
• Make sure the iFrame content loads properly and doesn’t break your layout. 
• Ask Bluehost’s 24/7 support for help if anything isn’t working as expected. 

Once everything looks great, hit ‘Publish’ to launch your iFrame! 

Final thoughts 

Want to embed a YouTube video, Google Map or external tool without touching complex code? That’s the power of an iFrame. 

You now know what is an iFrame, how to use the iFrame tag and how to safely add rich embedded content to your HTML page. It’s one of the simplest ways to enhance your site with interactive media. 

And with Bluehost, it’s even easier. Explore our AI-powered Website builder, responsive WonderTheme templates and built-in tools like Yoast SEO make embedding with iFrames fast, flexible and beginner-friendly. 

Ready to enhance your site with iFrames? Start building on Bluehost now. 

FAQs