Articles on: Elements

How to use Iframes

An inline frame (iframe) is a HTML element that loads another HTML page within the document.

It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics and interactive content. Here's how to use the Iframes element in TeleportHQ.

Adding iframes to the canvas
Changing Iframe content
Customizing Iframes

Adding Iframes to the canvas

To add an Iframe to your project you just need to select it from the Elements panel, then drag and drop it in the canvas, in the container of your choice.

Adding iframe element to the canvas

For now, iframes cannot be selected in the canvas, only in the Layers & Files tab (tree view)

Changing Iframe content

To change the source of the Iframe and therefore the content displayed inside, go to the Right side panel and in the HTML section, in the src field, add the Source URL from the Iframe code snippet.

Copy src property for the iframe

A website owner has the option to not allow it to be embedded in other sites. They can do this by using the X-Frame-Options header. There is nothing you can do on your end to bypass this.

Customizing Iframes

Like any other element used in TeleportHQ you can customize Iframes using CSS rules. From the Right side panel, in the HTML section you can use the Allow field to add functionalities to your Iframe. From the other panels in the Right side menu you can: add CSS classes, change the Iframe’s size and position, add padding, margins, borders and more.

Adding src property to the iframe element in the canvas

Updated on: 28/03/2025

Was this article helpful?

Thank you!