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

    Allowed iframe attributes: id, aria-label, title, width, height, marginwidth, marginheight, src, frameborder, allowfullscreen, sandbox, seamless, srcdoc, scrolling.

Examples

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. Do not use the style attribute:

Good: width="560" height="360"

Bad: style="width: 560px; height: 395px"

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

When copying the embed code for material in the Cornell Libraries' Kaltura instance, we recommend selecting the "V7 Online Exhibits - video player" or "V7 Online Exhibits - audio player":

Kaltura media not uploaded to the Cornell Libraries' Kaltura instance will be subject to a retention policy: material that has not been played in 4 years will be deleted. Material uploaded to Cornell Libraries' Kaltura instance are exempt from this 4-year retention policy.

Example:

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


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.



  • No labels