Can i use Iframe inside an Iframe?

I am using an

please give suggestions how i can call multiple iframe inside the main

Sure, I don’t know many you could do before it started looking like diminishing reflections, but it could be done.

Simply have the page you’re putting in the iframe have an iframe in it.

Of course the proprietary iframe tag was completely replaced by the standard object tag some time ago (Dec 1997 in the standards and when IE7 died for actually being able to use it).

I agree that using iframes is not the wisest thing to do.

But I guess it falls into the “sites kept using them so we’ll bring them back” things

thanks for reply,

I tried it but its not rendering inner iframe, do you have any examples,
please find screenshot…

Page Title

How are you pulling in your second page? I don’t see any source attribute.

Hi there shahzadsiddiqui8,

you cannot nest “iframe elements”. :ng:

Or to be more precise you can, but why bother as only the
outer element will render and your code will fail validation. :mask:

coothead

1 Like

Wouldn’t pulling in a nested iframe partially or fully obscure the parent iframe? I don’t understand why one might want to do this.

After reading a few opinions on the internet, including parts of W3C and MDN, I’m inclined to agree wtih @coothead, that nesting iframes is not possible.

One can give the illusion of nested iframes by putting the iframes in a parent container (such as a <div>) that has position:relative and assigning position:absolute to the to the iframe that you wish to appear inside and overlaying the other.

FWIW.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>iframes, positioned</title>
<!--
https://www.sitepoint.com/community/t/can-i-use-iframe-inside-an-iframe/214310/
shahzadsiddiqui8
-->
    <style type="text/css">

div {
    display:table;
    position:relative;
    margin:0 auto;
}
iframe + iframe {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
}

    </style>
</head>
<body>

<div>
    <iframe src="http://lorempixel.com/720/480" width="740" height="500"></iframe>
    <iframe src="http://lorempixel.com/480/320" width="500" height="340"></iframe>
</div>

</body>
</html>

Fixed dimensions.

After some research I found that you can’t nest an iframe inside of an iframe in the same file. Instead what you need to do is add a reference to the child iframe as the src attribute for the parent iframe. What I did was create a main.html file and a youtube.html file.

main.html

    <!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <iframe width="1000" height="1000" frameboder='0' src='./youtube-iframe.html' allowfullscreen>
        </iframe>
      </body>
    </html>

youtube.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/IvUU8joBb1Q" frameborder="0" allowfullscreen></iframe>
	</body>
</html>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.