Version:

    iFrame element

    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.

    iframe.png

    The iFrame element includes the following fields:

    Source

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

    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.

    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.

    Comments

     

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.