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.
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.
1. Copy the HTML <iframe> tag below
2. On your website, add an HTML widget to the location you want the embedded webpage to appear
3. Paste the HTML <iframe> tag you just copied into the HTML widget
4. Edit the code attributes to suit your specifications including the URL. The list of attributes highlighted below will guide you
5. Click ‘OK’ or ‘Save’
6. You have now embedded content onto your website or blog
Specifies the URL of the webpage/document/map/video to embed
Specifies the name of an <iframe>
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
Draws a border around this frame. Default frameborder is 1. The value 0 removes the border around this frame
The amount of space in pixels between the frame’s content and its top and bottom borders
The amount of space in pixels between the frame’s content and its left and right borders
Specifies the height of an <iframe>. Default height is 150 pixels
Specifies the width of an <iframe>. Default width is 300 pixels
Set to true if the can activate fullscreen mode by calling the requestFullscreen() method
Specifies a feature policy for the <iframe>
Specifies the HTML content of the page to show in the <iframe>
The alignment of the <iframe> with respect to the surrounding context
Specifies how much/which referrer information that will be sent when processing the iframe attributes
Enables an extra set of restrictions for the content in an <iframe>