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!