The iframe widget allows curators to embed any iframe code block into their exhibit.

This provides curators access to a wide variety of interactive (or non-interactive) content from third party services. When embedding third-party content, curators are responsible for ensuring that content is displayed correctly and accessibly.

Alternatives:

  • To embed content available in an oembed format, such as Flickr and SlideShare, use the Embed + Text Widget.
  • To embed a YouTube or Vimeo video onto your page, you can use the Video Widget.

Adding an Iframe Widget 

  1. When editing the home page or curated feature pages, select the + icon on the left of a default widget box:
  2. Select "IFRAME":
  3. Enter `<iframe>` code into block and "Save changes":

    Accessibility: Use the title attribute to describe the iframe's content: WCAG 2.1 Technique H64

Examples

Timelines by Knight Lab

Generate iframe code using [Knight Lab's instructions](https://timeline.knightlab.com/):

<iframe src="https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk&font=Default&lang=en&initial_zoom=2" height="600" width="100%" frameborder="0"></iframe>

Note the height and width attributes: curators may need to adjust height and width for desired fit.



Kaltura Videos

<iframe id="kaltura_player" src="EMBED_URL" width="800" height="750" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" frameborder="0" title="Kaltura Player"></iframe>

Note the height and width attributes: curators may need to adjust height and width for desired fit. If the transcript widget has been enabled on your Kaltura player, you may need to adjust the default height and width in your embed code to display the video with the transcript box.

Accessibility: Use unique id attributes for each iframe if you are embedding multiple Kaltura players on one page: WCAG 2.0 Technique H93

Example 1:

<iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/518251/sp/51825100/embedIframeJs/uiconf_id/22045162/partner_id/518251?iframeembed=true&playerId=kaltura_player&entry_id=1_68npz5bd&flashvars[streamerType]=auto&flashvars[localizationCode]=en&flashvars[Kaltura.addCrossoriginToIframe]=true&&wid=1_nf3ntai5" width="800" height="750" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" frameborder="0" title="Kaltura Player"></iframe>

Example 2 (with transcript):

<iframe type="text/javascript" src='https://cdnapisec.kaltura.com/p/518251/embedPlaykitJs/uiconf_id/52202672?iframeembed=true&entry_id=1_j529sb4k'  width="800" height="500" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" frameborder="0"></iframe>



  • No labels