HTML Iframe
What is Iframe ?
Iframe is a inline element used to embed other webpages or website within a page. Iframe can also be used to embedded Youtube video, embed Google map to a webpage.
Example
<iframe src="https://www.shineskill.com"> </iframe>
Iframe Attributes
Iframe Attributes |
|
|---|---|
| Attribute | Use |
| src | source of iframe |
| height | height of iframe |
| title | title for web accessibility |
| width | width of iframe |
| allow | allow features for iframe |
| loading="lazy" | delay iframe loading if not in viewport |
| allowfullscreen | iframe can open in fullscreen |
| frameborder | 0 to remove default border |
| name | name for iframe used to target on click of hyperlink. |
Embed Google Map in iframe
Iframes are also used to embed google map on a webpage. This is a free service by Google Maps. To embed goggle maps in iframe.
How to embed Google Map
Step 1:Open Google Maps.
Step 2: Click Left menu.
Step 3: Choose share or embed map
Step 4: In popup window, choose Embed a map.
Step 5: Choose the size of iframe.
Step 6:Copy iframe and paste on your webpage.
Step 7: Remove frameborder="0" from copied iframe.
Step 8: Save the code and open in browser.
Embed youtube video in iframe
Like google map, a youtube video can also be embedded into iframe and publish on website. To embed a youtube video, follow these steps.
How to embed Google Map
Step 1:Open youtube website.
Step 2: Click share button.
Step 3: Choose embed.
Step 4: Copy embed video code.
Step 5: Remove frameborder="0" from iframe.
Step 6:Save the code and run.