HTML Iframe: Display webpage within your WordPress post.

There are many tricks and methods in HTML and CSS which we usually ignore but can use with minimal knowledge and efforts to make our posts and pages eye-catching, smart, easily navigable as well as user-friendly. Such a term in html is ‘Iframe’. In this tutorial we’re going to represent how to use iframe to display webpage in your WordPress.

What is iframe and why to use it

Iframe is a frame or container what is used to display any webpage within a webpage. Suppose you’re going to create a post about ‘Food value of banana’. But before starting the post body, you like to add information about food elements. But you already have another post on ‘Elements of food’. Now you can choose to add the whole page ‘Elements of food’ in your post ‘Food value of banana’ rather than rewriting the info.

In this iframe setting process, you can fix up width and height to control area of the frame.

Now let’s do all the things practically:

How to add iframe within WordPress post

In WordPress, Gutenburg Edotor is not furnished with iframe block. So, just take a Custom HTML block. Put the following code in it:

<iframe 
src="netplanter.com" 
height="300px" 
width="80%">
</iframe>

We’ve applied Inline CSS in the starting tag of iframe. Here attribute src indicates the url of the page that will be displayed within Iframe. We put this value ‘netplanter.com’. height:250px and width:100%. You can set them as you wish. That’s all. Iframe will display the Home page of Netplanter.

See output:

Amazing!! No?

Use Iframe as the target for a link

In this stage, we’ll show how you can set Iframe as a target for a link. This means: You’ll create a link (a element) below Iframe. When visitors click the link, linked page will be shown within Iframe.

For this you have to use name attribute with value iframe_a in <iframe> tag. See code:

<iframe name="iframe_a">

And use target attribute with value iframe_a in <a> tag. Also put href value the url of the page you like to display in Iframe. See code:

<a href="netplanter.com"target="iframe_a"> 

Now let’s accumulate all the codes:

<iframe 
src="https://www.netplanter.com/wp-content/uploads/2020/02/ORCHID-1.jpg" 
height="250px" 
width="100%" 
name="iframe_a">
</iframe>

<a href="netplanter.com" target="iframe_a"> Jump to Netplanter Home </a>

In Iframe src, we’ve used an image url. And in href of atag, we use url of Netplanter Home. So, if anybody clicks the link, Netplanter Home page will be displayed within Iframe.

Now see the output:

Now click the link and enjoy!!