It’s common to share images, videos, and even web page content from another website on your site. You’ve been doing this very often without your notice, displaying social posts or adding YouTube and TikTok videos. This is one of the best ways to boost your online visibility and increase brand awareness.
Although you can directly add a downloaded video to your post or insert a screenshot of a social post, it’s highly recommended to use iFrames to reshare these contents. This is an effective way for you to avoid content copyright violation and slow site speed and performance.
But what exactly are WordPress iFrames? Why are they so useful? And how can you use them to share content on your site?
Our post today will help you answer all these questions.
What Is a WordPress iFrame and Why Is It Useful?
iFrame refers to an HTML code allowing you to create a separate HLTM page right on another page.
To make it simpler, iFrame is like a window for you to display content from another website on your page. This content can be videos, social media posts, maps, and so on. It gives users the same experience as they’re on that third-party site.
Here is an example of an iframe:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/iQ6mitEFeFI” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
The iframe code above includes a few attributes:
- Width/Height – Pixel values that define the size of your iframe.
- Src – The iFrame’s source. It’s is the URL of the embedded content. Make sure that the content must come from the same Hypertext Transfer Protocol website as yours. If you’re using HTTPs, you’re required to display content from HTTPs sites. The same thing goes for HTTP websites.
- Frameborder – Enable or disable the border around the edges of your iframe. “0” means the border will be hidden while “1” clarifies that content inside the iframe will be covered with a small border.
- Scrolling – A scrollbar in your iframe. You have 3 values of “yes”, “no”, and “auto.”
- Align – The default alignment of your iframe. You can display it on the “left,” “right,” “top,” “middle,” and “bottom” of the page.
Reasons You Need WordPress iFrames
As WordPress site owners, we need iFrames for 2 main purposes. Firstly, we can share the content of others without having to worry too much about getting involved in potential copyright-related issues. Visitors can copy the embedded content and reshare them in other places.
What’s more, using iFrames to present heavy media content eliminates the need of hosting them. You totally can download these videos or images, upload them to your WordPress media library, and add them to a post. However, this method is not advised.
If the media file size is too large, it takes up a huge amount of your server space and bandwidth. This leads to a longer loading time and a slowdown in your website speed.
When Should You Use a WordPress iFrame?
Iframes come in handy in numerous cases. They let you showcase another informative and insightful webpage content. On your side, it frees you from paraphrasing the text of that embedded content. Putting them in quotes is not really useful if you want to share the entire survey or report.
Site owners love iframes also due to their ability to present dynamic social media content. It’s okay to take a screenshot of a social post, including the live post brings a much better experience. Visitors can capture its interaction in real-time such as likes, comments, and shares.
Plus, your client holds a contest and hires you to run that content on your high-traffic website. Are you willing to go through the painful process of designing an advertisement landing page, receiving feedback, fixing it, and getting feedback again?
The answer should be definitely No. You can recommend the client to make their own landing page and then you embed that page on your site. This saves your time and helps the client control their ads fully in parallel.
What to Consider Before Using WordPress iFrame
iFrames prove beneficial in various cases, without a doubt. Still, using it efficiently is not an easy task. You need to pay extra attention to security issues as well as the HTTPS/HTTP compatibility of your site and the embedded content.
- Risk your site security
Iframes open the doors to other websites for both content reference and vulnerability holes. If the embedded webpage gets hacked or has security issues, it’ll affect your site directly.
Hackers may take advantage of iframes to leave malware, bad bots, and malicious code into your website without any hassle. Consequently, they control the admin area, break your site, and even worse, steal customer information.
That’s been said, you must use iframes to embed content from authority websites only and avoid linking to spammy content.
- Take HTTPS/HTTP capability into account
As we already mentioned above, it requires you to embed content from the same Hypertext Transfer Protocol as your site via an iframe. If you use HTTPs, make sure that the image, video, or webpage inside the iframe has to have the HTTPs URL. The same thing goes for HTTP websites.
- Consider SEO effects
A while ago, Google robots couldn’t read, crawl, and index the content in the iframe. They were unable to keep crawling the rest of your page, below the iframe part.
However, search engines can recognize the content in frames now. Links surrounding the iframe are considered as backlinks for crawlers to better understand your content. As a result, it brings some SEO juice to your website.
How to Add iFrame to Your Content
Many site owners choose the manual method to add an iframe to their content since it’s straightforward. All you need to do is display a piece of code on your page and make a few adjustments there.
#1 Embed iFrame to WordPress Manually
You can create a new WordPress page/post or open an existing one then enter this code to the content:
<iframe src="example.com"></iframe>
Remember to replace example.com with your actual embedded content URLs. you can add other elements to the code to customize the iframe appearance such as Width, Height, Allow, Importance. We already explained these parameters above. Here is an example of a complete iframe code:
<iframe src="passwordprotectwp.com" width="900" height="700" allow="fullscreen"></iframe>
Bear in mind that this code doesn’t apply to Facebook posts and YouTube videos as they disable manual iFrame embedding and already provide their own HTML blocks. You just need to copy and paste their source code to your content.
#2 Insert WordPress iFrame Using Source’s Embed Code
Firstly, open the YouTube video you intend to display on your WordPress content. There is a share button under each video for you to copy the source code. Hit Share and you’ll see this screen:
After clicking on the Embed option, you can copy the iframe code. YouTube provides you with default iframe parameters so you don’t need to change anything there.
Now, open the page you plan to display the video via an iframe. If you’re using Gutenberg for your site, find an HTML block and paste the iframe code there.
That’s it. You can preview your page to check how the iframe looks before making it live. In case you’re using classic editor, the process is exactly the same as our #1 instruction.
Make Use of WordPress iFrame
Iframes prove an effective tool to present content from other websites. You can use them to display others’ complete research, social posts, and advertising pages without having to worry about copyright violations. They free you from hosting heavy files which may reduce your page loading time.
We’ve shown you 2 ways to embed an iframe on your WordPress page, either manually or by copying the source’s embed code.
Besides embedding, you also need to protect content insides the iframe. Check out our documentation or tutorial video on how to protect HTLM files in iframes.
