Embed a Panopto Video

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.

• Log into your Panopto account.
  • For more details, see UBit's Logging into Panopto.
• Locate the 'session' (your video recording) that you wish to share.
  
  • See UBit's Distribute Panopto recordings.
• You now need to get to the Settings to 'Share' the video.
  
• In the title list, hover over the video's title to reveal the tool bar (Settings, Share, 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>

• 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
• Also, for accessibility, please add an additional 'title' attribute to provide a brief description of the asset; e.g. "video entitled UBCMS 6.3 Upgrade and Web Accessibility."
  
• Make sure the HTML Filter setting is set to 'Off'.

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.

• 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 at the 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 for the 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.

• 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 of the video for this session.
• Note: this thumbnail is not sufficient to supply a teaser image into a UBCMS carousel or slide deck.

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.

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>