An iFrame (inline frame) is an HTML tag that allows you to embed another website or document on your website. You can embed webpages, videos and maps in an iframe. An iFrame itself does not pose any security concern to your website, but you should always use iframe code from trusted sources or websites. Hackers can use hidden iframes to include malicious code on your website.
Embedding content from another website is useful especially when you want to legally and ethically share content that is not yours, since embedded content is not considered as copyright infringement. Also, the method comes into play when sharing large files, such as video, audio, or even images, since they will not be hosted on your website.
How to convert a webpage to HTML embed code
The best and easiest way to embed a webpage to your website is manually adding an iFrame code to an HTML widget on your site.
- Copy the HTML <iframe> tag below.
<iframe loading="lazy" src="https://victormochere.com" style="border:0px #ffffff none;" name="Victor Mochere" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="150px" width="300px" allowfullscreen></iframe>- On your website, add an HTML widget to the location you want the embedded webpage to appear.
- Paste the HTML <iframe> tag you just copied into the HTML widget.
- Edit the code attributes to suit your specifications including the URL. The list of attributes highlighted below will guide you.
- Click “OK” or “Save”.
- You have now embedded content onto your website or blog.
Attributes
| Attribute | Value | Description |
| src | URL | Specifies the URL of the webpage/document/map/video to embed. |
| name | text | Specifies the name of an <iframe>. |
| scrolling | auto yes no | Indicates when the browser should provide a scrollbar for the frame: “auto” – only when the frame’s content is larger than its dimensions, “yes” – always show a scrollbar, “no” – never show a scrollbar. |
| frameborder | integer | Draws a border around this frame. Default frameborder is 1. The value 0 removes the border around this frame. |
| marginheight | integer | The amount of space in pixels between the frame’s content and its top and bottom borders. |
| marginwidth | integer | The amount of space in pixels between the frame’s content and its left and right borders. |
| height | pixels | Specifies the height of an <iframe>. Default height is 150 pixels. |
| width | pixels | Specifies the width of an <iframe>. Default width is 300 pixels. |
| allowfullscreen | true false | Set to true if the can activate fullscreen mode by calling the requestFullscreen() method. |
| allow | Specifies a feature policy for the <iframe>. | |
| srcdoc | HTML_code | Specifies the HTML content of the page to show in the <iframe>. |
| align | left center right | The alignment of the <iframe> with respect to the surrounding context. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin unsafe-url | Specifies how much/which referrer information that will be sent when processing the iframe attributes. |
| sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation | Enables an extra set of restrictions for the content in an <iframe>. |
