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
- When editing the home page or curated feature pages, select the + icon on the left of a default widget box:
- Select "IFRAME":
- 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.