skip to primary navigationskip to content
 

Embedding video in your pages

Video and audio cannot be hosted on Falcon - it must be uploaded either to http://sms.cam.ac.uk or to a third party site such as vimeo, youTube or similar (see below). Support information for the sms is at http://www.ucs.cam.ac.uk/audio-video

Adding embedded content above or below the body text of a page

When editing a page there are now two options to use oEmbed to add a video from the Streaming Media Service (SMS; http://sms.cam.ac.uk/) or the University map (http://map.cam.ac.uk - or any other oEmbed-enabled media service, such as Vimeo, Soundcloud, YouTube, Flickr) either above or below the body text of the page. The inserted video or map will automatically size to fit 100% of the page width and resize responsively. You just need to paste in the URL of the item into either the top or bottom oEmbed field:

 

You can still use the manual method of embedding video into the content using insertion of the iframe code, if you want the embed to appear within the text (see below).

 

Adding embedded content within the body text of a page

To embed an audio or video player, you'll need fetch some script from the page the item is on. This embedding script is usually available via a 'Share' button.

On the SMS, the 'Share' button appears below the video player. When this button is clicked, a box is revealed that contains the code you need. A dropdown menu allows you to choose a size for the player.

YouTube also features a 'Share' button beneath each video. If you click on this and select the 'Embed' tab, the code you need will appear in the box and be highlighted, ready to copy. Clicking on the 'Show more' link will reveal more options, such as the size of the video. One of these options is 'enable privacy-enhanced mode'. Selecting this will enable a cookie-free mode that won't store information on visitors to your web page. This is recommended – particularly if you don't want to add another privacy notice to your cookie policy.

On Vimeo, the share button is a paper aeroplane icon. Clicking on this opens a window containing the required embed code. You can select 'Show options' to gain access to features such as autoplay, looping and showing links or descriptions below the video.

Once you've selected any options and made any adjustments you'd like to make, you should select and copy all of the embedding code the site provides and return to your Falcon site.

Then open the HTML view of your page, find the point where you want the video to appear and paste in the code you have copied. Make sure you are placing the video between paragraphs. Then click 'Update' to save your changes and close the popup window.

The player will then appear on the web page (in the edit view as a pale green box, which will be replaced when the page is saved). If you're embedding audio or video from the SMS, it's useful to add a link to the SMS page because it gives access to a textual description and to alternative versions of the media (which people with poor connections or smartphones might need).

Here is a sample video inserted here with a following line to add a link to other versions of the materials:

Other versions of the video and a transcript may be found at http://sms.cam.ac.uk/media/1457624.

 

Adding embedded content to a portlet in the right-hand column of a page

To add a video to the right-hand column, you have two options.

If you only want to display the video with a title and no other supporting text, you can use the oEmbed portlet. Go to ‘Manage portlets’, select ‘Add portlet’ and ‘oEmbed portlet’. Give your video a title, and then paste in the URL for the SMS, YouTube or Vimeo page that features video. Select save.

If you’d like to add a description of the video or other material in the portlet, you’ll need to use a Static text portlet, and add ‘Embed’ code to the HTML editor. Select ‘Manage portlets’, then ‘Add portlet’ and ‘Static text portlet’. Then follow the same process as outlined above for finding and copying the embed code for your chosen video and pasting it into the HTML editor.

 

Making the iframe resize responsively

Videos that are inserted using the oEmbed methods (either above or below the body text in the main column or in the oEmbed portlet in the right column) will resize dynamically to fit the size of the browser window. However, those that are inserted using the embed code approach will not.

SMS, YouTube and other video-embedding iframes can be styled to be responsive to size, so they will adjust to the size of the window. To make this work, enclose the iframe in a div with class="scale-iframe", for instance:

<div class="scale-iframe"><iframe frameborder="0" height="240" src="http://www.youtube-nocookie.com/embed/5ec_rPApKCA" width="320"></iframe></div>

Here is an example: