Mobile Responsive iFrames

How To

• 1

  Choose an iFrame Method

  There are two ways to add iFrame content to your Digital Commons website. You can:

  • Add an iFrame Component. This is the recommended method and the best choice for those with little or no HTML coding experience.
  • Edit the Source code inside the Text Editor anywhere it is available, such as on a Blog Entry or Press Release. HTML coding is required for this method. 

  Note: You must provide a meaningful title in the code for digital accessibility regardless of the method you choose.

• 2

  Add an iFrame Component

  The iFrame Component is the best option for content creators with little knowledge of HTML code. This component can be used on Landing Pages, Site Pages, Catalogue Items and inside the Tabs/Accordion Component anywhere it is available.

  Insert an iFrame Component in a Band

  On a Landing Page, Catalogue Item, or Site Page, first insert a Band, then:

  • Select the Add Component button.
  • Select iFrame from the Choose Component dialogue box.

  Insert an iFrame Component in a Tabs/Accordion Component

  Within a Tabs/Accordion Component:

  • Expand Advanced Settings
  • Select the First or Second Sidebar
  • Select iFrame from the Choose Component dialogue box.

  Select a Responsive Wrapper

  The iFrame Component supports responsive content, allowing iFrame contents to adjust for mobile devices automatically. Digital Commons has two CSS classes to support the mobile responsiveness of iFrames for you to choose from:

  • The 16x9 option sets the iFrame to a 16:9 ratio for tablets and desktops, but changes to a 1:1 ratio on mobile devices for iFrame content that stacks the contents on small screens, such as Tableau data.
  • The 4x3 option sets the iFrame to a 4:3 ratio for tablets and desktops, but changes to a 3:4 ratio on mobile devices.
  • Use the Responsive Wrapper drop-down menu to select the desired ratio.

  Paste the Code and Make it Accessible

  • Copy the HTML code for your iFrame and paste it in the Embed Code field.
  • Do not use a fixed height or width for iFrames to allow the iFrame and its contents to resize for mobile devices for responsiveness.
  • The title attribute of the iFrame element is required for accessibility. Check that the code meets digital accessibility requirements:
    • If there is no title (title=""), then you must enter one.
    • If the title is not meaningful (title="Bad Quality Title"), then you must edit it to be accurate and descriptive.
    • Correct Format: title="Accurate and Descriptive Title"

  Accordion

  iFrame Component Example

  • Google Calendar Embed Code as Added by Content Creator
  • Google Calendar Embed as Experienced by Site Visitors

  Tab/Accordion Items

  Google Calendar Embed Code as Added by Content Creator

  Example: The title attribute of this iFrame example contains North Carolina Virtual Public School Google Calendar.

  <iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&wkst=1&bgcolor=%23FFFFFF&src=ncpublicschools.gov_fbho1njf31ui6n86vioomnsijg%40group.calendar.google.com&" title="North Carolina Virtual Public School Google Calendar" allowfullscreen></iframe>

  Google Calendar Embed as Experienced by Site Visitors

  Second Sidebar
• 3

  Add an iFrame using the Text Editor

  

  You can edit the Source code inside the Text Editor anywhere it is available. Use this method if you need to include an iFrame on a content type that does not use Bands and Components, such as on a Blog Entry or Press Release. 

  Note: You should be familiar with HTML code to use this more technical method.

  On the desired page:

  • Go to the Page Content area.
  • Find the toolbar for the Text Editor.
  • Select the Source button.
  • The Text Editor display toggles to the HTML code. Select the Source button again to return to the standard Text Entry view.
  • Paste the code, provide a title for accessibility, and apply CSS styling as desired by using the guidance below. 

  Accordion

  • Paste the Code and Make it Accessible
  • Mobile Responsiveness and Bootstrap Aspect Ratio
  • Responsive iFrame with Breakpoint
  • Example Google Calendar iFrame Embed in the Text Editor Source

  Tab/Accordion Items

  Paste the Code and Make it Accessible

  • Copy the HTML code for your iFrame and paste it in the Embed Code field.
  • The title attribute of the iFrame element is required for accessibility. Check that the code meets digital accessibility requirements:
    • If there is no title (title=""), then you must enter one.
    • If the title is not meaningful (title="Bad Quality Title"), then you must edit it to be accurate and descriptive.
    • Correct Format: title="Accurate and Descriptive Title"

  Mobile Responsiveness and Bootstrap Aspect Ratio

  Do not use a fixed height or width for iFrames. Instead, allow the iFrame and its contents to resize for mobile devices for responsiveness. Do this by wrapping any embedded element in a parent element with .ratio and a Bootstrap aspect ratio class. The immediate child element is automatically sized.

  Example Code:

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

  <iframe src="https://www.youtube.com/embed/abcdef" title="Accurate and Descriptive Title" allowfullscreen></iframe>

  </div>

  Responsive iFrame with Breakpoint

  The iFrame Component handles responsiveness automatically with settings applied from a drop-down menu. When adding an iFrame in the Text Editor Source code, you must provide this CSS in the code yourself. 

  Digital Commons has two CSS classes with breakpoints to support the mobile responsiveness of iFrames for you to choose from:

  16x9 Responsive iFrame

  .responsive-iframe_16x9

  The 16x9 option sets the iFrame to a 16:9 ratio for tablets and desktops, but changes to a 1:1 ratio on mobile devices for iFrame content that stacks the contents on small screens, such as Tableau data.

  Example Code 16x9:

  <div class="ratio responsive-iframe_16x9">

  <iframe src="https://www.youtube.com/embed/abcdef" title="Accurate and Descriptive Title" allowfullscreen></iframe>

  </div>

  4x3 Responsive iFrame

  .responsive-iframe_4x3

  The 4x3 option sets the iFrame to a 4:3 ratio for tablets and desktops, but changes to a 3:4 ratio on mobile devices.

  Example Code 4x3:

  <div class="ratio responsive-iframe_4x3">

  <iframe src="https://www.youtube.com/embed/abcdef" title="Accurate and Descriptive Title" allowfullscreen></iframe>

  </div>

  Example Google Calendar iFrame Embed in the Text Editor Source

  If you paste this code into the Source of the Text Editor:

  <div class="ratio responsive-iframe_4x3">

  <iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&wkst=1&bgcolor=%23FFFFFF&src=ncpublicschools.gov_fbho1njf31ui6n86vioomnsijg%40group.calendar.google.com&" title="North Carolina Virtual Public School Google Calendar" allowfullscreen></iframe>

  </div>

  Then Visitors will Have this Experience: