How to use iframe for Ads Loading ?

Last Updated : 17 Dec, 2021

The iframe tag is one of the oldest HTML tags present in HTML. The HTML iframe tag is used to embed another HTML document within the current one. We are using iframe mostly to show ads on our web page. Generally, your ad provider will give the code for the ad unit along with the <iframe> tag. This article will focus on how these can be used in a webpage.

Iframes execute parallel to the webpage so it reduces page loading time. But there are some limitations of this tag too one of them are each iframe tag is a standalone request for a single ad unit. It does not support multi-ad unit requests. For multiple ad units on the same webpage, we have to implement an iframe tag for each ad unit.

Approach:

We will add an iframe tag inside the body of the HTML
Insert the ad URL in the src attribute. This URL will be given by the ad provider.
Adjust the height and the width of your ad by using the height & width attribute.

Syntax:

<!-- Insert your ad url in src attribute 
and set height and width of your ad" --> 
<iframe src="https://youradurl.com" 
        height="700px" 
        width="500px">
</iframe>

These are the common attributes that we will use in the iframe tag:

src: It is used to set the address of the ad.
srcdoc: It is used to set the HTML content of the page.
height: It is used to set the iframe height in pixels.
width: It is used to set the iframe width in pixels.
name: It is used to set the name of the iframe so that we can use that in JavaScript.
allow: It is used to set the feature policy for the iframe.
sandbox: It is used to set the restrictions of the iframe.

Example: In this example, the iframe source is set to some website to demonstrate the loading of content in an iframe.

HTML

<!DOCTYPE html>
<html>
<body>
     
<p> Welcome to GFG</p>
 
     
<p>Below is a iframe tag</p>
 
 
    <!-- Added iframe tag with its attributes -->
    <iframe src="https://practice.geeksforgeeks.org/events/"
            height="300px"
            width="500px">
    </iframe>
</body>
</html>

Output:

Note: Some websites like Google, Youtube and many more don’t allow you to show their pages on iframes. They block iframes to show their website. We can only use an iframe on that website which are not protected from the iframe.

Suggest improvement

How to embed iFrame in WordPress ?

Share your thoughts in the comments