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 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"></iframe>

A real example of an embedded video

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

Add a UB-Branded title card to your video

  • Download the UB-branded powerpoint slides. Try the widescreen version.
  • Edit the initial slide to fit your needs then delete the rest of the slides.
  • Save the slide as an MP4 video clip (Powerpoint, Save As, choose location and then select MP4 as the format). By default it should be a short, 5 second video clip.

NB. you will need to use IE or Safari for this procedure -- Advanced Editting is not supported in other browsers.

  • Log into Panopto.
  • Upload your title card clip into a convenient folder (probably not where your main sessions are located).
  • Find the session that you want to modify and enter Edit mode.
  • Make sure your slider is atthe very start of the session.
  • Click on the + sign (next to the scissors icon) and Add a clip.
  • A dialog box will open, called 'Add a clip.' Choose your uploaded powerpoint clip and click Insert.
  • Wait a short while fo rthe clip to be inserted then if you are happy, click Publish at the top of the window. (Revert will discard your efforts.)
  • Your title slide clip will now play before your main video starts.

Add a thumbnail ('preview image') to your video

  • Download the UB-branded powerpoint slides. Try the widescreen version.
  • Edit the initial slide to fit your needs then delete the rest of the slides.
  • Save the desired slide as an image (Save As, plus your choice of PNG, GIF, or JPG formats.) This becomes your thumbnail image.
  • Log into Panopto.
  • Find the session of interest. Enter Settings.
  • Beside Preview Image, click Edit.
  • Click Browse, find your local image, upload it, then click Save and close out of the Settings dialog box.
  • Your thumbnail should now show instead of the initial part o fthe video for this session.
  • Note: this thumbnail is not sufficient to supply a teaser image into a UBCMS carousel or slide deck.

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

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"></iframe>

Working example (starting at 30 seconds)

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:

January 16, 2019