How to embed iFrame in WordPress ?

An iFrame (Inline Frame) is a way to embed one web page inside another using HTML code. This allows you to display content like videos, maps, or other websites directly on your page without needing to store these files on your own server. iFrames are handy for showing external content while keeping your site running smoothly.

How to Use iFrames in WordPress

There are several ways to add an iFrame to your WordPress site, and one of the most common methods is by manually inserting the iFrame code directly into a page or post. Here’s a simple guide on how to do it:

1. Manually Adding iFrames to a WordPress Page

To add an iFrame, you only need a single line of code that includes the opening and closing HTML elements and the URL of the webpage you want to display.

Syntax:

<iframe src="https://example.com"></iframe>

Steps to Embed an iFrame in a WordPress Page

Step 1: Go to the WordPress page or post where you want the iFrame to appear.

Step 2: Click on the Add (+) block button and select the HTML block from the popup.

Step 3: Insert the iFrame tag into the HTML block with the URL of the content you want to embed.

Note: There are a handful of limits to the source URL to be aware of. To begin, Iframes may only show content from sites that utilize the same Hypertext Transfer Protocol (HTTP) as yours. To put it another way, if your site is HTTPS, you can only embed information from other HTTPS sites. Similarly, if you use HTTP, you may only include URLs that utilize HTTP as well.

Step 4: Click the Publish button to save and publish your page.  

Step 5. Your page should now display the embedded content, similar to what you see below.

More About the iFrame Tag

Once you know how to add an iFrame, you can customize it further to suit your website’s needs using various parameters. Here are some of the most common ones:

• Allow: This parameter lets you specify certain features or behaviors for your iFrame, like allowing full-screen viewing.
• Height: Sets the height of the iFrame window on your web page in pixels.
• Width: Sets the width of the iFrame window on your web page in pixels.

For instance, the Iframe with a window size of 1080 pixels by 720 pixels, full-screen viewing enabled, and set to download after the rest of the webpage is as follows.

<iframe src=”https://example.com” width=”1080″ height=”720″ allow=”fullscreen”></iframe>

Conclusion

Using iFrames in WordPress is a great way to share content from other websites, like videos or maps, without hosting the files yourself. This keeps your website running smoothly and ensures you respect copyright laws when displaying third-party content. By adjusting iFrame parameters, you can easily customize how the embedded content looks and behaves on your site, making it very useful for enhancing your WordPress pages.

varunherlekar

Follow

Improve

Article Tags :

• PHP
• Web Technologies
• Wordpress
• PHP-Questions