HTML – Iframes
An iframe (short for “inline frame”) is an HTML element that allows you to embed another HTML document within the current document. It is commonly used to embed external content, such as videos, maps, or other web pages, into a webpage.
Here’s an example of how to use an iframe:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>My Webpage</title> </head> <body> <h1>Welcome to My Webpage</h1> <iframe src="https://phpgurukul.com" width="500" height="300"></iframe> <p>Some text here...</p> </body> </html> |
In the example above, we have an iframe element that embeds the external website “https://phpgurukul.com” within our webpage.
The src attribute specifies the URL of the content you want to embed. It can be a link to an external webpage or the path to a local HTML file.
Here are some commonly used attributes for iframes:
src: Specifies the URL of the content to be embedded.width: Specifies the width of the iframe in pixels or as a percentage.height: Specifies the height of the iframe in pixels or as a percentage.frameborder: Specifies whether or not to display a border around the iframe. Set it to0to remove the border.allowfullscreen: Specifies whether the iframe can be viewed in fullscreen mode. Use the value"true"to allow fullscreen, or"false"to disable it.sandbox: Specifies a sandbox mode for the iframe, which provides a restricted environment for the embedded content. This attribute can help mitigate security risks. Possible values include"allow-same-origin","allow-scripts","allow-forms", and"allow-popups", among others.
Here’s an example that demonstrates the usage of some of these attributes:
|
1 2 |
<iframe src="https://phpgurukul.com" width="500" height="300" frameborder="0" allowfullscreen></iframe> |
This iframe embeds the webpage at “https://phpgurukul.com” with a width of 500 pixels and a height of 300 pixels. The frameborder attribute is set to 0 to remove the border, and the allowfullscreen attribute enables fullscreen mode for the embedded content.
It’s important to note that when embedding content from external sources, such as other websites, you need to ensure that you have the necessary permissions or licenses to do so. Respect the content owner’s terms and conditions.
I hope this provides a better understanding of iframes in HTML! Let me know if you have any further questions.
