Browser Support: Chrome,Firefox,Edge,Safari,Opera.
Iframe create a window with html page inside parent page.
<!DOCTYPE html>
<html>
<head>
<title>_parent</title>
</head>
<body>
<iframe src="http://www.ddd.com"></iframe>
</body>
</html>Result:
Attributes:
allowfullscreen
Allow to open iframe video in full screen.
<iframe src="https://www.youtube.com/embed/T9yGcKlYAiw" allowfullscreen></iframe>
This full screen button is working
height and width
You can declare specific height for the iframe.
<iframe height = "200px" width="1000" src="https://www.youtube.com/embed/T9yGcKlYAiw" allowfullscreen></iframe>Result:
loading : eager or lazy
You can set the load time of the iframe : immediately or wait until some conditions are met.
<iframe height = "200px" width="1000" src="https://www.youtube.com/embed/T9yGcKlYAiw" loading = "eager"></iframe><iframe height = "200px" width="1000" src="https://www.youtube.com/embed/T9yGcKlYAiw" loading = "lazy"></iframe>name
You can declare specific name for the iframe.
<iframe name = "youtubeIframe" height = "200" width="1000" src="https://www.youtube.com/embed/T9yGcKlYAiw" loading="lazy"></iframe>referrepolicy:
no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url
You can declare which referrer information to send when fetching the iframe.
You use this conditions for certain purposes. If you want to create an iframe and you get an error, You should use it depending on the error you get.
<iframe src="https://www.youtube.com/embed/T9yGcKlYAiw" referrepolicy = "no-referrer" ></iframe><iframe src="https://www.youtube.com/embed/T9yGcKlYAiw" referrepolicy = "no-referrer-when-downgrade" ></iframe><iframe src="https://www.youtube.com/embed/T9yGcKlYAiw" referrepolicy = "origin" ></iframe><iframe src="https://www.youtube.com/embed/T9yGcKlYAiw" referrepolicy = "origin-when-cross-origin" ></iframe><iframe src="https://www.youtube.com/embed/T9yGcKlYAiw" referrepolicy = "same-origin" ></iframe><iframe src="https://www.youtube.com/embed/T9yGcKlYAiw" referrepolicy = "strict-origin-when-cross-origin" ></iframe><iframe src="https://www.youtube.com/embed/T9yGcKlYAiw" referrepolicy = "unsafe-url" ></iframe>srcdoc
You can insert html content inside the iframe.
<iframe src="https://www.youtube.com/embed/T9yGcKlYAiw" referrepolicy = "unsafe-url" ></iframe><iframe width="560" height="315" srcdoc="<p>hello</p>"></iframe>Result:
sandbox
| allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation |
Enables more set of restrictions for the content in the iframe.
<iframe src="index.html" sandbox="allow-forms" </iframe><iframe src="index.html" sandbox="allow-pointer-lock" </iframe><iframe src="index.html" sandbox="allow-popups" </iframe><iframe src="index.html" sandbox=" allow-same-origin" </iframe><iframe src="index.html" sandbox="allow-scripts" </iframe><iframe src="index.html" sandbox="allow-top-navigation" </iframe>
Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?
I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article.
Thanks for sharing. I read many of your blog posts, cool, your blog is very good.
Your point of view caught my eye and was very interesting. Thanks. I have a question for you.