Как вставить iframe в wordpress

Как вставить iframe в wordpress

How to Easily Embed iFrame Code in WordPress (3 Methods)

Do you need to embed an iFrame code in a WordPress publish or web page?

IFrames present a simple approach to embed video or different content material to your web site with out importing it. Many third-party platforms like YouTube enable customers to use iframe to embed content material from their web site.

In this text, we’ll present you ways to simply embed iFrame code in WordPress utilizing a number of strategies.

What is iFrame?

An iFrame helps you to embed movies or different content material in your web site. This means you may show a video in your web site with out truly internet hosting that video.

The iframe is like opening a window in your web site to show exterior content material. The precise content material remains to be loaded from the supply that you’re embedding from.

To add an iframe, you want to add a particular HTML code. Don’t fear if that sounds fairly technical.

We’re going to present you the best approach to embed an iFrame in your WordPress weblog.

Why Use iFrames?

A key purpose to use iFrames is to keep away from having to host movies or different assets in your web site, which can deplete your bandwidth and space for storing.

Also, iFrames allow you to keep away from infringing on different folks’s copyrighted content material. Instead of downloading their video or different content material then importing it to your web site, you merely add it to your web page utilizing an iFrame.

Another benefit is that if the unique content material is modified, it can mechanically be up to date in the iFrame too.

There are additionally some drawbacks to utilizing iFrames. Not all web sites allow you to put their content material into an iFrame. Also, the iFrame might find yourself too large or small on your web page, and you will have to manually alter it.

Another problem is that HTTPS websites can solely use iFrames for content material from different HTTPS websites. Similarly, HTTP websites can solely use iFrames for content material from different HTTP websites.

This is why many platforms like WordPress prefers oEmbed. You can use oEmbed to embed movies in addition to another forms of content material by merely pasting a URL into your WordPress publish. The content material will mechanically be resized to match, and it is going to be the best measurement even on cell units.

Important: WordPress doesn’t assist oEmbed for Facebook and Instagram posts. For extra on this, try our full information on the Facebook / Instagram oEmbed problem and the way to repair it.

Another nice various to iFrames is to use a social feeds plugin. We suggest utilizing Smash Balloon‘s plugins. These allow you to show content material from Facebook, Instagram, Twitter, and YouTube.

Having mentioned that, let’s check out three other ways to add iFrames to your web site.

1. Use the Source’s Embed Code to Add iFrame in WordPress

Many massive websites have an Embed choice for his or her content material. This offers you the particular iFrame code that you simply want to add to your web site.

On YouTube, you will get this code by going to the video on YouTube, then clicking the Share button beneath it.

Next, you will notice a popup with a number of share choices. Simply click on on the Embed button.

Now, YouTube will present you the iFrame code. By default, YouTube will embody the participant controls. We additionally suggest that you simply allow the privacy-enhanced mode.

After that, go forward and click on the Copy button to copy the code.

Now, you may paste that code into any publish or web page in your web site. We’re going to add it to a brand new web page in the block editor.

To create a brand new web page, go to Pages » Add New in your WordPress dashboard.

Then, add an HTML block to your web page.

Now, you want to paste the YouTube iFrame code into this block.

You can then preview or publish your web page to see the YouTube video embedded there.

Tip: If you’re utilizing the previous basic editor, you may nonetheless add iFrame code. You want to accomplish that in the Text view.

Switching between the visible and textual content view on the Classic Editor may cause points with the iFrame code.

2. Using the iFrame WordPress Plugin to Embed an iFrame

This methodology is helpful because it permits you to create an iframe to embed content material from any supply, even when that supply doesn’t present an embed code.

First, you want to set up and activate the iFrame plugin. For extra particulars, see our step-by-step information on how to set up a WordPress plugin.

Upon activation, the plugin will begin working immediately with no setup wanted. Go forward and edit or create a publish or web page. Then, add a shortcode block.

After that, you need to use this shortcode to enter your iFrame code.

Simply exchange URL goes right here with the URL of the content material you need to embed in your web site. We are embedding a Google map.

Tip: You may have to use the Embed choice to get the direct URL of the content material. You want to use simply the URL, not the remainder of the embed code.

Next, preview or publish your publish. You ought to see the Google map embedded in your web site.

You can optionally add parameters to the iFrame shortcode to change how the embedded content material shows. For occasion, you would set the width and peak, and add or take away a scrollbar or border. You can discover particulars on the iFrame plugin’s page.

Tip: If you’re utilizing the Classic editor, you may merely paste the shortcode into your publish or web page. You don’t want to swap to the Text view.

3. Manually Creating the iFrame Code and Embedding in WordPress

If you like not to use an iFrame plugin, then you may create the iFrame code manually. To do that, you want to add an HTML block in the WordPress content material editor.

First, you want to paste this code into your HTML block.

Simply exchange “URL goes right here” with the direct URL for the content material that you really want to embed. You solely want the URL itself.

Here, we’re embedding a map from Google.

You can add additional parameters to the HTML tag. For occasion, you would set the width and peak of your iFrame. The code beneath means your embedded content material will show 600 pixels huge and 300 pixels excessive.

This is helpful for those who want to prohibit the embedded content material to a smaller area.

We hope this text helped you find out how to simply embed iFrame code in WordPress. You may need to try our final information on how to pace up your WordPress web site, and our comparability of one of the best key phrase analysis instruments for enhancing your search engine optimization rankings.

If you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may discover us on Twitter and Facebook.

Как вставить iframe в wordpress

Примеры использования iFrame

Преимущества и недостатки iFrame

• Позволяет вставлять визуальный контент.
• Может отображать несколько рекламных объявлений.
• Удобный способ отображения контента из внешнего источника в любом месте сайта.
• Безопасно, поскольку у пользователей нет доступа к исходному коду контента.

• iFrame могут замедлять веб-страницу.
• Могут быть источником опасности, если ведут на вредоносные сайты.
• Не все типы устройств поддерживают iFrame.
• Ухудшают показатели SEO сайта.

Как вставить iFrame на WordPress-сайт, используя плагин

Как вручную вставить iFrame на WordPress-сайт

Показать видео на сайте WordPress с помощью функций движка и плагина

• Нажимаем на плюс
• Находим раздел вставка
• Ищем сервис или социальную сеть откуда нужно взять ролик на сайт WordPress

Добавить iframe в WordPress для видео на сайте

1. Жмем на стрелочку
2. Переходим во вкладку Экспортировать
3. Копируем код
4. Если нужно, то перед копированием настраиваем величину

• Задать миниатюру
• Выровнять по центру (что бывает проблематично)
• Задать продолжительность
• Сделать автозапуск
• Выставить ширину и высоту
• Управление звуком
• Авто реплей

Устаревший тег embed

• Сокращает пространство
• Тормозит сайт
• Форматы поддерживаются только в mp4 расширении
• Большие файлы нельзя загрузить

How to Easily Embed iFrame Code in WordPress (3 Methods)

Last updated on December 16th, 2020 by Editorial Staff | Reader Disclosure Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

Do you want to embed an iFrame code in a WordPress post or page?

IFrames provide an easy way to embed video or other content to your site without uploading it. Many third-party platforms like YouTube allow users to use iframe to embed content from their website.

In this article, we’ll show you how to easily embed iFrame code in WordPress using multiple methods.

What is iFrame?

An iFrame lets you embed videos or other content on your site. This means you can display a video on your site without actually hosting that video.

The iframe is like opening a window on your site to display external content. The actual content is still loaded from the source that you are embedding from.

To add an iframe, you need to add a special HTML code. Don’t worry if that sounds quite technical.

We’re going to show you the easiest way to embed an iFrame in your WordPress blog.

Why Use iFrames?

A key reason to use iFrames is to avoid having to host videos or other resources on your site, which will use up your bandwidth and storage space.

Also, iFrames let you avoid infringing on other people’s copyrighted content. Instead of downloading their video or other content then uploading it to your site, you simply add it to your page using an iFrame.

Another advantage is that if the original content is changed, it will automatically be updated in the iFrame too.

There are also some drawbacks to using iFrames. Not all websites let you put their content into an iFrame. Also, the iFrame may end up too big or small for your page, and you will need to manually adjust it.

Another issue is that HTTPS sites can only use iFrames for content from other HTTPS sites. Similarly, HTTP sites can only use iFrames for content from other HTTP sites.

This is why many platforms like WordPress prefers oEmbed. You can use oEmbed to embed videos as well as some other types of content by simply pasting a URL into your WordPress post. The content will automatically be resized to fit, and it will be the right size even on mobile devices.

Important: WordPress doesn’t support oEmbed for Facebook and Instagram posts. For more on this, check out our full guide on the Facebook / Instagram oEmbed issue and how to fix it.

Another great alternative to iFrames is to use a social feeds plugin. We recommend using Smash Balloon‘s plugins. These let you display content from Facebook, Instagram, Twitter, and YouTube.

Having said that, let’s take a look at three different ways to add iFrames to your site.

1. Use the Source’s Embed Code to Add iFrame in WordPress

Many large sites have an Embed option for their content. This gives you the special iFrame code that you need to add to your site.

On YouTube, you can get this code by going to the video on YouTube, then clicking the Share button below it.

Next, you will see a popup with several share options. Simply click on the Embed button.

Now, YouTube will show you the iFrame code. By default, YouTube will include the player controls. We also recommend that you enable the privacy-enhanced mode.

After that, go ahead and click the Copy button to copy the code.

Now, you can paste that code into any post or page on your site. We’re going to add it to a new page in the block editor.

To create a new page, go to Pages » Add New in your WordPress dashboard.

Then, add an HTML block to your page.

Now, you need to paste the YouTube iFrame code into this block.

You can then preview or publish your page to see the YouTube video embedded there.

Tip: If you’re using the old classic editor, you can still add iFrame code. You need to do so in the Text view.

Switching between the visual and text view on the Classic Editor can cause issues with the iFrame code.

2. Using the iFrame WordPress Plugin to Embed an iFrame

This method is useful as it allows you to create an iframe to embed content from any source, even if that source doesn’t provide an embed code.

First, you need to install and activate the iFrame plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will start working straight away with no setup needed. Go ahead and edit or create a post or page. Then, add a shortcode block.

After that, you can use this shortcode to enter your iFrame code.

Simply replace URL goes here with the URL of the content you want to embed on your site. We are embedding a Google map.

Tip: You may need to use the Embed option to get the direct URL of the content. You need to use just the URL, not the rest of the embed code.

Next, preview or publish your post. You should see the Google map embedded on your site.

You can optionally add parameters to the iFrame shortcode to change how the embedded content displays. For instance, you could set the width and height, and add or remove a scrollbar or border. You can find details on the iFrame plugin’s page.

Tip: If you’re using the Classic editor, you can simply paste the shortcode into your post or page. You don’t need to switch to the Text view.

3. Manually Creating the iFrame Code and Embedding in WordPress

If you prefer not to use an iFrame plugin, then you can create the iFrame code manually. To do this, you need to add an HTML block in the WordPress content editor.

First, you need to paste this code into your HTML block.

Simply replace “URL goes here” with the direct URL for the content that you want to embed. You only need the URL itself.

Here, we’re embedding a map from Google.

You can add extra parameters to the HTML tag. For instance, you could set the width and height of your iFrame. The code below means your embedded content will display 600 pixels wide and 300 pixels high.

This is useful if you need to restrict the embedded content to a smaller space.

We hope this article helped you learn how to easily embed iFrame code in WordPress. You may also want to check out our ultimate guide on how to speed up your WordPress site, and our comparison of the best keyword research tools for improving your SEO rankings.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

How to Create an Iframe in WordPress With or Without a Plugin

Jessica Thornsby Last updated Dec 20, 2021

WordPress lets you upload many different types of file.

However, just because you can doesn’t mean you should.

Some formats are notorious for taking up space on your server. Depending on your web hosting plan, uploading lots of large files can quickly burn through your storage, and may even incur additional charges. Even worse, uploading third-party files to your website can land you in legal hot water.

In this post, I’ll show you how to bypass both of these problems. We’ll see how iframes can be the secret to filling your site with lots of engaging, multimedia content, without infringing copyright or destroying your page load times.

Everything You Need to Know About Iframes

An iframe is an HTML document that you embed inside another document. Many WordPress website owners use iframes to display external content, such as YouTube videos.

To embed an iframe, you’ll need to wrap the external content’s URL in HTML tags. You might also use additional parameters to customize how this content displays and functions. When it comes to these HTML tags, you have two options: write the required code manually or use a plugin to generate the HTML for you.

For many website owners, iframes are the perfect way to share large files. Although WordPress supports a range of formats, it’s not always a good idea to host this content on your website.

Large files such as lengthy, high-resolution media can take up a ton of space on your server. They can also bring your site grinding to a halt, which is bad news for the visitor experience.

Instead of uploading these files to WordPress, many people host them on an external platform, and then embed this content via an iframe. This is a win-win situation—you can wow visitors with rich content, without your page load times ballooning out of control.

With iframes, you’re not restricted to displaying your own content. Embedding is not considered copyright infringement by the United States, since you’re not actually creating a copy of the original content. The European Union also agrees ​that you can ​embed a video containing copyrighted material without infringing on the creator’s copyright.

If you want to feature third-party content on your site, then iframes are generally considered a legal and ethical solution. This makes iframes perfect for building a more engaging, multimedia website, without you necessarily having to create lots of new content.

Since they’re such a versatile and useful component, let’s explore a few different ways to create iframes—without and without a plugin.

1. Use a Custom HTML Block

Plugins are a huge part of the WordPress experience. There’s a plugin to help you perform practically any task. However, it’s not all positive!

Plugins add third-party code to your website. Over the years, hackers have exploited vulnerabilities in countless plugins, including some of the most popular and reputable WordPress plugins on the market. Some third-party software can even damage your site’s performance or introduce conflicts and bugs.

For these reasons, you may want to consider limiting your plugin use. The good news is that you can embed content without installing any additional plugins.

To create an iframe:

• Copy the URL of the content that you want to embed. You can then wrap the link in <iframe> tags and set it as the source for your tag. For example:

• Navigate to the page or post where you want to embed this content, and open that webpage for editing.
• Create a new block by clicking on the little + icon.
• In the subsequent popup, start typing Custom HTML and then select this block when it appears. This adds a new Custom HTML block to your webpage.

• You can now add your iframe code to this block:

To check how this embedded content will appear to visitors, click the Preview button.

If you’re happy with how this content displays and functions, then you can publish or update this page as normal. Alternatively, there are a few ways that you can tweak the standard iframe.

Firstly, you can define the width and height in pixels, for example:

By default, WordPress displays a border around the frame. You can remove this border using the frameborder=»1″ attribute, for example:

You can also change where this content appears on the page, using the following values: left, right, top, and bottom. For example, if you wanted to right align your iframe, then you’d use:

This will display the following output:

2. Use a WordPress Shortcode Block

Alternatively, you can embed iframes using a shortcode. This method is similar to using the Custom HTML block:

• Open the page or post where you want to create the iframe.
• Click the little + icon and start typing shortcode.
• Select the Shortcode block when it appears. This inserts a new block.

• Enter the following code, being sure to replace www.example.com with the URL of the content that you want to embed:

You can now preview how this content will appear, and publish your page as normal.

3. Embed a YouTube URL

With YouTube users uploading over 500 hours of video every minute, this is a hugely popular platform. Unsurprisingly, WordPress provides a built-in YouTube block, which you can use to embed video content.

To embed a YouTube video:

• Open the page or post where you want to feature this content.
• Click on the little + button and start typing YouTube.
• Select this block when it appears. This inserts WordPress’s dedicated YouTube block.

• In a new tab, navigate to the YouTube video that you want to embed.
• Copy/paste the video’s URL into your YouTube embed block.

• Click the Embed button.

WordPress will now retrieve the video in question, and display it as part of your webpage:

You can now preview this page in the WordPress editor. If you’re happy with your embedded YouTube video, then it’s time to hit Publish (or Update!).

4. Copy/Paste the Embed Code

Many major websites offer a dedicated Embed option for their content. When clicked, this will provide an embed code that you can copy/paste into your website.

Let’s use Vimeo as an example:

• On the Vimeo website, find a video that you want to embed.
• Select the Share button.

• This opens a popup containing various sharing buttons, plus the embed code for this particular video. You can now copy this embed code.

• Switch to your WordPress dashboard and open the page or post where you want to embed this content.
• Click the little + icon and insert a Custom HTML block.
• After inserting this block, add your embed code.

You can now preview how this embedded content will look, by clicking Preview in the floating toolbar. Alternatively, you can click the Preview link in the upper-right corner.

5. Install the Advanced iFrame Plugin

If you’re embedding content on a regular basis, then it may be worth installing a dedicated plugin.

Advanced iFrame makes it easy to add iframes to any page or post. It also gives you greater control over your iframes, which is perfect if you have a very specific look or functionality in mind.

These customizations include hiding the iframe until the embedded content is fully loaded, which can help improve the perceived page load times. You can also hide different areas of the iframe to ensure your visitors are focusing on the right area.

If you want to upgrade, then there’s a Pro version available, which has some additional features. For example, if you purchase an Advanced iFrame Pro license, then you’ll be able to auto-zoom the iframe. This can improve the experience for mobile users. The Pro version also boasts browser detection, so your site will automatically tailor the embedded content based on the visitor’s browser.

After activating this plugin, you can insert an iframe using the following shortcode:

Make sure you replace the URL with the content that you want to display. Here, you may be interested to learn that the team behind the Advanced iFrame plugin has also published a free iframe checker application. You can use this plugin to verify whether you’re permitted to insert a particular URL into an iframe.

If you don’t want to code, then this plugin also provides an ​​Advanced iFrame block:

After inserting this block, give it a click. This opens the WordPress Post/Block menu:

In the Block menu, enter the URL of the content that you want to embed. You can also specify a width and height:

You can enter these values either as a percentage of the total content area or as a pixel value. If you don’t specify a width and height value, then WordPress will use the plugin’s defaults.

If you want to take a look at these default settings, then select Advanced iFrame in WordPress’s left-hand menu. Then, select the Basic Settings tab:

Here, you’ll find all of the default settings for the content that you embed via Advanced iFrame. There’s a lot here, so you may want to take some time to explore:

If you prefer to embed your iframes using the shortcode, then you may be interested in the Generate a shortcode for the current settings button. This button creates a shortcode containing all of the plugin’s default settings.

If you need to override these defaults, then simply add or remove attributes from this shortcode.

To generate this code, navigate to Advanced iFrame > Basic Settings. You can now scroll to the How to insert an iframe section, and give the Generate a shortcode… button a click.

Wrapping Up

In this post, I showed you how to embed external content on your site. By opting for iframes, you can preserve your site’s loading speeds, while avoiding any potential copyright issues.

Throughout this tutorial, we covered several methods. If you’re regularly embedding content, then you may want to check out the Advanced iFrame plugin. This plugin takes a quick and code-free approach to embedding external content. Alternatively, if you only need to create the occasional iframe, then WordPress has various built-in iframe blocks that should get the job done.

How to embed a WordPress iFrame with and without a plugin

Sharing or featuring other creators’ content on your side can have legal difficulties.

This is where embedding an iframe code comes to offer a simple solution.

If you have a WordPress website that is focused on media, then it is essential that the content you want to provide to your audience is relevant and is going to reach them.

Here we need to be aware of our hosting space and not consume it entirely.

This article created by our team at wpDataTables, the #1 plugin for tables and charts, helps you to understand how you can use a WordPress iFrame, what it is, and how can you embed it on your site.

What is a WordPress iFrame?

By using a WordPress iFrame, you can embed a web page in the content of another one. This is done by using classic HTML tags that contain the external page link. Other specifications like how the Window appears can also be added in the custom HTML block.

This means that you can have a dynamic page on your site without hosting the content on the server. This saves a lot of space and makes your website move faster for your users.

At the same time, if you embed and not download, let’s say a video, the videos can appear on your site.

Users can watch the videos without any extra load on your serves. This is smart because the videos that are being streamed come directly from the source’s server.

You can use iFrames on almost any website or web page, and we are already starting to understand why. By using iFrames, many site owners create a medium that helps display the content or web pages from other sources. You can do all of this without being worried that you need any copyright permissions.

If you use iFrames, you can also show the content on your site without the need to host it in the WordPress Media Library.

Why is this important?

The answer is quite simple, all media files have taken up a significant amount of the storage space, and you could even slow your site down.

Why use a WordPress iFrame?

iFrame helps the website save storage and be faster. There are many users on the web to embed iFrame in WordPress without a plugin. This includes videos, images, other sites, and more. You can even use iFrame to save storage space by embedding content from other serves.

For sure, there are quite a few methods to embed content like using AJAX or HTML5 web elements or others. However, in many cases, iFrame is a better choice. For one, iFrame embedding is being used to cross-domain content. By doing so, a website user can ask the selected resources from a separate website and view it without manipulating the element.

Here are some advantages of using WordPress iFrame:

• It lets you embed visual content for free
• You can display multiple ads
• It is a simple way to view content from external sources without any problems
• It is secure, and you do not need to access the original content code

Embed iframes in WordPress with a plugin

WordPress iFrame plugins were made to use the HTML iFrame element that was deprecated on WordPress because of security reasons. This lets you customize the iFrame functionality with just some clicks. There is no need for any iFrame code anymore.

The plugins support shortcodes for inserting iFrame. They can be added in any section of the website like footer, widgets, and so on. The iFrame can showcase any other websites easily, and you can customize various attributes of it.

In this following, we are going to see the five best WordPress iFrame plugins:

iFrame

The iFrame plugin is going to offer great results. It has the same features as embedding an iFrame but is generated using a simple shortcode. Here is an example of how to use the shortcode for this WordPress plugin:

Advanced Responsive Video Embedder

This plugin is excellent for those that embed YouTube or Vimeo videos on their WordPress website.

With the help of this plugin, you can bring videos in a responsive and straightforward format to your site.

This WordPress plugin also adds a Video Embed button in the WordPress text editor, and with its help, you can easily embed videos from different websites.

Advanced iFrame

Another useful plugin is the Advanced iFrame plugin. It uses shortcodes and not the regular iFrame attributes and provides a UI to create those shortcodes.

As WordPress removes iFrame tags for security purposes, this plugin is the best. You can begin by installing the plugin, and then you’ll see that using an iFrame gets easier.

Auto iFrame

This is a solution to embed iFrame on a WordPress website. Check it out and take advance of it.

iFrame popup

The iFrame popup WordPress plugin is developed to show a specific web page in a popup window. It uses the URL of the web page to be displayed. Besides that, it also uses the jQuery fancy box extension to reveal the iFrame in a popup.

How to embed iFrame in WordPress without a plugin

To do this, the steps are not complicated at all. All you need to do to embed code for an iFrame is open and close the HTML tags and the URL of the web page that you want to integrate.

An iFrame code looks like this:

After that, if you want, you can bring more parameters to the tag. Defining the Window of the iFrame can be done using this:

• Src – The source of the iFrame, this is a URL. If your site has SSL, you need to ensure all iFrames start with https://.
• Width/Height– For height and Width of the iFrame Window, define values in Px
• frame border – For displaying or hiding the Frameborder, use values ‘0’ or ‘1.’
• Align – For determining the Window’s page alignment, Use values “left” “right” “right” “top,” “bottom.”
• Scrolling – For disabling or enabling Scrolling inside the Window. Use values “yes,” “no” or

There are some limitations that we need to know about the source URL. If you use an iFrame, you can display just content from other sites that use the same Hypertext Transfer Protocols as yours.

So if your website starts with HTTPS, you can embed content from other third-party HTTPS sites. This also applies to sites that use HTTP; they can only embed URLs that contain HTTP.

Ending thoughts on embedding a WordPress iFrame

In conclusion, knowing how to embed an iFrame code is very useful for any WordPress site owner.

This is even more true for somebody that relies on a lot of content to get the attention of its users.

If you enjoyed reading this article on how to embed a WordPress iframe, you should check out this one about how to change fonts in WordPress.