---
title: "iFrame element"
date: "2017-11-12T09:59:14+00:00"
summary: "Embed external web pages seamlessly into your layout with the iFrame element. Learn how to locate, configure, and style iFrames for optimal integration and responsiveness in your Site Studio projects."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/iframe-element"
id: "2adf3e6c-2972-431d-921b-3d36bcbf814d"
---

Table of contents will be added

Use the iFrame element to include external pages within your layout via an iFrame. 

Locating the iFrame element
---------------------------

To find the iFrame element:

1.  Navigate to a component or a template with the Layout canvas
2.  Click the **+ button** on the Layout canvas
3.  Within the Elements tab, look for the iFrame element.

![49b0e626-iframe.png](https://acquia.widen.net/content/61d7d86f-547d-4d0b-a1aa-39945a0b99f9/web/49b0e626-iframe.png)

The iFrame element includes the following fields:

Source
------

*   Source (URL) - Enter the URL of the page to show within the iFrame

Important

When adding the desired URL, make sure to remove the <iframe> tags. **You only need to include the source URL.** Some external websites may not allow their pages to be displayed within iFrames due to their local security settings.

Custom style
------------

**Layout style** - Apply a Layout custom style to the iFrame. For more information see [Applying styles to elements.](/drupal-starter-kits/add-ons/site-studio/applying-styles-elements "Applying styles to elements")

Setting a Height is a requirement for the iFrame element. If you are making a responsive website, be aware that the content inside an iFrame should be responsive too, or it may not display correctly on smaller screens.

Apply a height using the **Height CSS property** within the **Styles** tab or applying a Custom style to it.

Match heights
-------------

*   **Match heights** \- Match the height of the element using:
    *   **None** - Removes the match heights at the specific breakpoint
    *   **Class** \- Match the height of the element with another element with the same class name.

For more information on Match heights, see [Match the heights of elements.](/drupal-starter-kits/add-ons/site-studio/match-heights-elements "Match the heights of elements")

Comments
--------

*   **Add comments -** Add comments to the Element.  For more information, see [Adding comments to an element](/drupal-starter-kits/add-ons/site-studio/adding-comments-element "Adding comments to an element").