Mobile Responsive iFrames

Rendering iFrame Elements Effectively

Summary

Embedded iframe elements should render appropriately across various devices and screen sizes, including mobile devices. For the best user experience, iframe elements must be responsive.

Audience

Editors and Publishers.

How To

  • 1

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

    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>

  • 3

    Resources