Display videos from UB's Panopto software using the HTML Snippet.
All videos on your website must meet ADA guidelines.
> accessibility considerations
Last reviewed: September 12, 2023
These videos can be embedded on UBCMS pages by pasting the Panopto Embed/Share code into an HTML Snippet. Before you activate your UBCMS page, change the video height and width settings to better fit your layout.
Here's our original example from above:
<iframe src="https://ub.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=9518c7c2-074b-4bca-bcae-a89d010ac623&v=1" width="720" height="405" style="padding: 0px; border: 1px solid #464646;" frameborder="0" allowfullscreen allow="autoplay"></iframe>
Here's the code, modified for a 6-column size (like this page):
<iframe src="https://ub.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=9518c7c2-074b-4bca-bcae-a89d010ac623&v=1" width="449" height="253" style="padding: 0px; border: 1px solid #464646;" frameborder="0" allowfullscreen allow="autoplay" title="video entitled UBCMS 6.3 Upgrade and Web Accessibility"></iframe>
To comply with accessibility standards, please make sure your HTML Snippet includes a 'title' in the code. This becomes the description of the iframe in the html code loaded with your UBCMS Web page.
In the example on this page, we used:
<iframe src="https://ub.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=9518c7c2-074b-4bca-bcae-a89d010ac623&v=1" width="449" height="253" style="padding: 0px; border: 1px solid #464646;" frameborder="0" allowfullscreen allow="autoplay" title="video entitled UBCMS 6.3 Upgrade and Web Accessibility"></iframe>
All video displayed through your website must be captioned to meet ADA accessibility guidelines. You can manually type in a caption stream right from the editor, but Panopto recommends using their automatic captions first and then editing the captions as needed.
Panopto's automatic captions must be 'imported' before they become visible with your video. To access the captions area, log into Panopto and then open your video session. The left sidebar should show 'Captions'. Then select 'Import Captions' and 'Import automatic captions.'
To manually add (or edit) captions, click on the captions tab - start typing in the text box - press ENTER when you want to add your captions. After saving and committing the captions, these will now be visible in the captions tab in the viewer. You can also download the entire caption file from Settings, make an edits offline (being careful to keep the times, and then re-import the adjusted version.
NB. you will need to use IE or Safari for this procedure -- Advanced Editting is not supported in other browsers.
Embedded Panopto videos do not have a thumbnail image, so they cannot automatically be displayed in carousels or slide decks.
We have two workarounds:
You can have the video start at a specific point by using the 'start' variable in the URL. This sets the time to start the video in seconds. The default is 0. Our example from above, modified to start at 30 seconds:
<iframe src="https://ub.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=9518c7c2-074b-4bca-bcae-a89d010ac623&v=1&start=30" width="449" height="253" style="padding: 0px; border: 1px solid #464646;" frameborder="0" allowfullscreen allow="autoplay" title="video entitled UBCMS 6.3 Upgrade and Web Accessibility, starting at 30 seconds"></iframe>
All videos on UBCMS websites must have synchronized captions. An additional transcript is optional, but if provided, should be closely associated with the video player. Captions (and transcripts) support those who cannot see or hear your video.
Best practice: captions are most easily added using the automated tools on YouTube, even if the final placement is not in that platform.
Authors are responsible for any third party content that is hosted or linked from their UBCMS pages.
This includes applications such as Formstack forms and Google Maps, that are displayed using their own component, as well as entries from UB's Calendar of Events, and external content hosted using HTML Snippet or External Embed.
Best practice: for Formstack forms, avoid using the date picker and the 'other' option in dropdowns.
Best practice: for the HTML Snippet and External Embed, always run an accessibility test (e.g. using a browser extension), check its behavior in mobile, and consider how it may impact page performance in general.
Best practice: if your code relies on a 'div' or iframe to house its content on your page, it must have an identifying label, often coded as a 'aria-label' or sometimes a 'title', that assistive technology can see. Formstack produces a title automatically, although it is poorly worded, but other applications tend to skip this requirement so it must be added manually on your end.
If you have concerns that external vendor content is not accessible, please contact UB's Web Accessibility officer.