Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  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/):

Code Block
languagexml
<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.


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

Examples

...

Kaltura Videos

Code Block
languagexml
<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.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

Example 1 (without transcript):

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":

Image Added

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:

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

Example 2 (with transcript):


HTML
<iframe type="text/javascript" src='https://cdnapisec.kaltura.com/p/518251/embedPlaykitJs/uiconf_id/5220267253290252?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/):

Code Block
languagexml
<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.


HTML
<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>

...