iframes in HTML
Web pages can be embedded within other websites using an HTML Iframe (a webpage within a webpage). An inline frame is a type of frame that is defined by the HTML iframe> tag.
In an HTML document, an iframe creates a rectangular area in which another page can be displayed.
JavaScript allows the content of the webpage and the content of the iframe to communicate with one another.
Syntax for iframes
The <iframe> tag in HTML describes an in-frame environment.
<iframe src=”URL”></iframe>
The “src” element in this case identifies the full Uniform Resource Locator (URL) of the inline frame.
Alter the iframe’s width and height to suit your needs.
The “width” and “height” parameters of an iframe allow you to modify the frame’s dimensions. The properties’ values are supplied in pixels by default, however you can also change this to a percentage if you like. i.e. 50%, 60% etc.
Pixels Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframe example</h2>
<p>Size the iframe using the height and width parameters.</p>
<iframe src=”https://www.coderazaa.com/” height=”500″ width=”400″></iframe>
</body>
</html>
Percentage Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframe example</h2>
<p>Size the iframe using the height and width parameters.</p>
<iframe src=”https://www.coderazaa.com/” height=”80%” width=”50%”></iframe>
</body>
</html>
The iframe’s width and height can also be modified with CSS.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframe example</h2>
<p>Size the iframe using the height and width parameters in CSS.</p>
<iframe src=”https://www.coderazaa.com/” style=”width:800px;height:400px;” ></iframe>
</body>
</html>
Remove the border of iframe
There is typically a border around an iframe by default. Applying the style> attribute and the border property of CSS will get rid of the border.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframe example</h2>
<p>Remove iframe border using CSS.</p>
<iframe src=”https://www.coderazaa.com/” style=”border:none” ></iframe>
</body>
</html>
Referral Link’s Iframe Target
By utilising iframe, you may choose which frame a link will open in. The iframe’s name attribute must be referenced in the link’s target attribute.
Example:
<!DOCTYPE html>
<html>
<body><h2>Iframe Target for a Link Example</h2>
<iframe height=”400px” width=”100%” src=”contact.php” name=”iframe_a”></iframe>
<p><a href=”https://www.coderazaa.com/html” target=”iframe_a”>Coderazaa.com</a></p>
<p>If the name of the iframe and the link target are not the same, the link will not open as a frame.</p></body>
</html>
Insert a video from YouTube using iframe
The iframe> tag allows you to embed a video from YouTube directly onto your site. Your website will automatically play the uploaded video, and you can customise its dimensions, playback speed, and more.
These are some ways for embedding a YouTube video on a website:
- Choose the video from YouTube that you wish to embed.
- To share this movie, select the SHARE button.
- Choose the Embed > button.
- Get the HTML source.
- Add this code to your HTML document.
- Modify the dimensions to your liking (as per requirement).
Example
