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’.
width:100%. You can set them as you wish. That’s all. Iframe will display the Home page of Netplanter.
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> tag. See code:
target attribute with value
<a> tag. Also put
href value the url of the page you like to display in Iframe. See code:
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>
src, we’ve used an image url. And in
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:Jump to Netplanter Home
Now click the link and enjoy!!