Embedding Ensemble Video

USF sites now recognizes Ensemble video (from media.usfca.edu) streams, just as it does Vimeo and YouTube. When used in a component the Ensemble video will now go into lightbox mode and be full screen as it is with the other types. There are a number of things to be aware of with this enhancement, however.

The Ensemble server is divided into many accounts. Each account has its own set of presets. Because of this, you may need to work with ITS media services on changing some of the settings for your area to be able to use this feature on the external site. The lightbox activation relies on having an embed code available that is responsive. Ensemble's original embed codec called FlowPlayer is not responsive. Your account needs to have the JS Player set of options enabled which was added to the system last year. It should have already been applied universally by the media team but if it is not on your account you will need to contact them. 

We have applied to the activate ensemble video in lightbox mode to a number of components on the site:

In Content Image/Video Callout
In Content Flexible Callout
Homepage Feature
Explore USF Feature
Full Width Story Feature
Full Width Recent News Content & View
Below Content Image Content Panel Pane


Here's what you need to do to make it work:
  • While in your Ensemble account, go to your library and select the video you want to use. On the preview window click on the Embed tab. 
  • Select the various options from that window you prefer (title, auto play, etc) and make sure the dropdown on the right is set to "iFrame Responsive". When ready copy all the embed code in the field above the video preview. It should be similar to this:<div style="position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: auto; -webkit-overflow-scrolling: touch;"><iframe id="ensembleEmbeddedContent__8Mf5nCHYk6X2hZzHDwMHA" src="https://media.usfca.edu/app/plugin/embed.aspx?ID=_8Mf5nCHYk6X2hZzHDwMHA&isResponsive=true&isNewPluginEmbed=true&displayTitle=false&startTime=0&autoPlay=false&hideControls=true&showCaptions=false&displaySharing=false&displayAnnotations=false&displayAttachments=false&displayLinks=false&displayEmbedCode=false&displayDownloadIcon=false&displayMetaData=false&displayDateProduced=false&audioPreviewImage=false" frameborder="0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" scrolling="no" allowfullscreen></iframe></div>
  • In the component you wish to use, past only the SRC URL portion of the above code into the link field in the component. You do not need the whole div or the whole iFrame, just the URL. Paste that info as a link into the component in the Content Reference URI section (not in the media pane by using the Video URL button). Here's a test samplehttps://www.usfca.edu/node/192932