Mobile Responsive iFrames

Rendering iFrame Elements Effectively

Summary

Content providers can enrich their pages with embedded content, making pages more engaging and visually appealing. Site Pages and Landing Pages have an iframe component available. For other content types, embedded iframe elements should render appropriately across various devices and screen sizes, including mobile devices.

Audience

Web Managers, Publishers and Editors.

How To

  • 1

    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" ... >
  • 2

    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.
  • 3

    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>

  • 4

    Resources