Mobile Responsive iFrames

Rendering iFrame Elements Effectively

Summary

You can enrich your web pages with embedded content, making pages more engaging and visually appealing. Share data using iFrame embeds from sources such as ArcGIS, Google Maps, iContact, Power BI, SoundCloud, and Tableau. An iFrame component is available for many content types, such as Landing Pages and Site Pages. For other content types, iFrames are placed into a Text component by editing the Source. Take care to ensure that the iFrame renders appropriately across various devices and screen sizes, including mobile devices.

Audience

Web Managers, Publishers and Editors.

How To

  • iFrame Component

    On Site Pages and Landing Pages, the iFrame Component simplifies the process of embedding external content. This component now supports responsive content, allowing iframe contents to automatically adjust for mobile devices. Users can easily integrate interactive elements, such as PowerBI dashboards, maps, and other content, by copying and pasting an embed code directly into the component. This enhancement makes it easier to enrich your pages without requiring coding expertise.

    iFrame component
    • Select the Appropriate Responsive Wrapper: Choose between a 4x3 or 16x9 aspect ratio based on your code's requirements.
    • Enhance Accessibility with Descriptive Titles: Include a meaningful title within the <iframe>element to support accessibility. For example: <iframe title="Descriptive Title Here" ... >

    HTML iFrame Tutorial on W3Schools

  • Create Mobile Responsive iFrames

    The best practice of making an iframe responsive allows the iframe and the iframe contents to resize for mobile devices. iFrames should not have a fixed height and width. Wrap any embedded element, like <iframe>, in a parent element with .ratio and a Bootstrap aspect ratio class. The immediate child element is automatically sized.

    Code:

    <div class="ratio ratio-16x9">

    <iframe src="https://www.youtube.com/embed/abcdef" title="Add YouTube video title here" allowfullscreen></iframe>

    </div>

    Title Attribute:

    The title attribute of the iframe element is required for accessibility.

    title="Add YouTube video title here"

    An iframe gets its name from the title attribute. However, screen readers announce the presence of an iframe only when users encounter the content. If the iframe does not have a title (or a meaningful title), users could become confused.

    For example, users may encounter an iframe with a title announcing a link to a video presentation on Web Management. If users are not interested in this embedded content, they can easily scroll past it without wondering if they are missing something important.

    Mobile Responsive iFrames phone.

  • Responsive iFrame with Breakpoint

    There is a .responsive-iframe_16x9 CSS class that sets the iframe to 16:9 ratio for tablets and desktops but changes to a 1:1 ratio on mobile devices for iframe contents like Tableau that stack the contents on small screens. There is also a .responsive-iframe_4x3 class that sets a 4:3 ratio for tablets and desktops but a 3:4 ratio on mobile devices.

    Code:

    <div class="ratio responsive-iframe_4x3">

    <iframe src="https://www.youtube.com/embed/abcdef" title="Add YouTube video title here" allowfullscreen></iframe>

    </div>

  • Resources