Embed a Panopto Video Recording

Display videos recorded using UB's Panopto software on UBCMS pages.

Adding a Panopto Video to Your Web Page

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.

Start in UB's Panopto account.

Hover over the video to reveal the tool bar, including Settings, Share, and Edit.

Hover over the video to reveal the tool bar, including Settings, Share, and Edit.

  • Click Share.
  • Click Embed and then copy the HTML code that is provided; e.g. 

    <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>
In the Share section, click Embed to reveal the code.

In Share, click Embed to reveal the code.

Now go to the UBCMS page to embed the video.

  • Add an HTML Snippet to your UBCMS page.
  • Open the HTML Snippet and paste in the embed code.
  • In the embed code, depending on your page layout, edit the width and height as follows:
    • For a middle column on a Three-Column page (or 6-column size):
      • change to width=449 height=253
    • For a Two Column 'wide on right' page (or 9-column size):
      • change to width=682 height=384
    • For a One Column Page (or 12-column size):
      • change to width=960 height=540
  • Make sure the HTML Filter setting is set to 'Off'.

An example of the code modified

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 Two Column ('wide on right') page:

<iframe src="https://ub.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=9518c7c2-074b-4bca-bcae-a89d010ac623&v=1" width="682" height="384" style="padding: 0px; border: 1px solid #464646;" frameborder="0" allowfullscreen allow="autoplay"></iframe>

Additional Considerations ("FAQ")

Captions (ADA accessibility)

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

Adding your video to carousels and slide decks

Embedded Panopto videos do not have a thumbnail image, so they cannot automatically be displayed in carousels or slide decks.

We have two workarounds:

  1. Create a Highlight module that links to the video on Panopto's site and has an image for your teaser. Visitors will be sent to the Panopto site to play your video.
  2. Create a separate UBCMS page dedicated to playing the video, with the video embedded. Then add a suitable thumbnail image in Page Properties. Visitors will land on your UBCMS page to play the video locally.

Loading a Prefered Section of the Video

There is currently no way to make your video start at a specific point in the session. The workaround is to save a version of your session, edited to just show the segment of interest. Multiple versions can be saved of any session.

Additional Resources

Was This Page Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)

On this page:

All videos on your website must meet ADA guidelines.
> accessibility considerations

Master Class Resources:

Related Components:

Last Reviewed:

June 20, 2018