How to Embed iFrames in WordPress

Sharing content online is a common practice. You might be stumped, however, when trying to figure out how to incorporate certain kinds of content. Sharing large files or specific items from other websites can be a challenge at times.

Fortunately, there is a fairly simple web design practice you can employ to display specific types of content on your WordPress website. Using HTML to create Inline Frames (iFrames) can make it simpler to share images, videos, and other media online.

In this article, we’ll explore the different uses of iFrames on a website. We’ll also go through the steps for creating iFrames, both manually and with a plugin. Let’s get started! 

iFrame Uses

When you use an iFrame, you essentially create a little portal on your website that enables content from somewhere else to be viewed. This can be useful in several scenarios.

Using an iFrame means you don’t have to actually host the files you want to display. The content stays in its original location, and can be viewed through the frame on your site. One way this technique can be helpful is when you want to display large files. An iFrame can bring that content onto your website without slowing down its loading speeds.

It’s worth noting that iFrames are the only kind of frame allowed in HTML5. There are a variety of different kinds of content you might use them to display, including: 

• Images: You can use iFrames to show high-quality images from an outside gallery, and avoid having to compromise due to file size. 
• Videos: Hosting your videos on a platform like YouTube or Vimeo, and using an iFrame to place them on your website, can enhance the user experience while freeing up your website storage space. 
• Other web content: Highlighting content from other websites, such as portfolio pages or recipes, can bring rich content to your audience easily.

When you use iFrames, you can also avoid complicated copyright rules. Several courts have ruled that using an iFrame to display copyrighted material does not constitute a copyright infringement in all cases.

A website can also include scripts to prevent its content from being included in an iFrame. However, we recommend always crediting the original creator of any content you use, or seeking legal advice if you’re unsure how to proceed.

Using iFrames With a Plugin

One of the easiest ways to employ iFrames on a WordPress website is to use an iFrame plugin. Fortunately, there are several highly-rated options to choose from. 

Step 1: Download and Configure an iFrame plugin

For our example, we’re going to use the Advanced iFrame plugin. It’s flexible, simple to use, and very well-rated: 

After installing and activating the plugin, you’ll find a new Advanced iFrames menu item in your WordPress dashboard. Advanced iFrame has a pretty extensive set of options. You’ll want to start with the Options tab, and review the “QuickStart” video: 

Then, you can scroll down and review some of the plugin’s options. These are all set up with plenty of helpful explanations and easy-to-select choices: 

Advanced iFrames also provides a free iFrame checker, which will check any URL you provide to see if it contains scripts that prevent the content from being included in an iFrame. It’s a good idea to run any URL through this tool before using it in an iFrame on your website.  

You’ll want to also review the Basic Settings tab. There, you can customize elements of the iFrame such as height, width, and frame borders: 

Once you’ve configured the plugin’s settings to meet your needs, you can start using iFrames on your website.

Step 2: Use the Advanced iFrame Block

In the WordPress Block Editor, you’ll now have an Advanced iFrames block available for use:

If you have trouble finding this block the first time you want to use it, it will be under the Widgets category.

Once you click on the Advanced iFrame block, it will automatically load with content from the plugin creator’s website. You can configure the block by using the Block options on the right-hand side of the page: 

There, you can add the URL of the content you want to appear in the iFrame. You’ll also be able to override some of the plugin’s settings if needed. 

Step 3: Preview Your Site

If you tested your URL with the iFrame checker, you should be good to go. It’s always best to preview your changes before you publish your content, however. You should see a live preview of your iFrame as you edit it and make changes.

You can also use the Preview option in the upper right-hand corner of your edit window, in order to view the post in the context of your site’s menus and sidebars. 

Using iFrames Without a Plugin

If you don’t want to work with a plugin but still would like to use iFrames, you’re in luck! You can manually apply code to your posts and pages to include iFramed content.  

Step 1: Insert an Embed Code

If you want to incorporate content such as a video from YouTube on your website, you’ll need to locate the embed code YouTube provides. You can find this underneath a video by clicking on Share.

This will bring up a menu of sharing options. You’ll want to select Embed to get the code you need for your iFrame.

A separate window will open with a preview of what the embedded content will look like. You’ll then be able to copy an iFrame code snippet.

You can also check the Start at box if you want viewers to automatically begin viewing content at a certain time code.

Next, you’ll go back to your WordPress post and add the Custom HTML block. You can find this under the Formatting category.

After you add this block to your post, you can simply paste in the embed code you copied from the YouTube page.

Next, you’ll want to make sure the embed is functioning properly and looks the way you want it to. You can click Preview in the Custom HTML block to see if your iFrame is working.

With that, you’ve successfully placed an iFrame on your website. The same process will work for any platform that provides you with embed codes.

Step 2: Customize Your iFrames

If you’re still not quite happy with the way the iFrame displays on your post or page, you can manually adjust some of the values in the code. It’s recommended that you use Cascading Style Sheets (CSS) to fully customize how iFrames appear on your website. 

The iFrame tag allows for a number of custom properties. However, it’s important to note that many of these are no longer supported by HTML5. You will likely need to investigate your theme’s CSS as we mentioned previously, since you may not be able to override certain formatting directly in the Custom HTML block.  

Step 3: Check Your iFrame Content Regularly

When using iFrames, you’ll want to check the framed content regularly. Since you’re opening up a window to content that you may not have any editorial or quality control over, it could cause a problem on your website at any time. 

For example, if the video we used in our example is taken down from its YouTube channel, our post would have a broken player in it. This is a bit more obvious than a broken link, as it will leave a visual impact on your website. Checking your iFrame content periodically enables you to change or take down any media that is no longer working.

Optimize Your Site With WP Engine

Using iFrames on your website can keep things running smoothly, while still incorporating rich media and dynamic content. Here at WP Engine, we know the importance of understanding important web design concepts and having access to the best developer resources out there. 

What’s more, we’re committed to helping you provide the best digital experiences to your customers. We have a diverse selection of fully-managed WordPress hosting plans, so you can focus on designing beautiful websites!