Home ▻ T4 Training▻Training▻Training Examples▻Embedded Video

Embedded Video

Easily embed any video in your page

The easiest way to embed any video (regardless of the provider), is to use the 'Embedded Video' content type.  This takes the suggested embed code and wraps it in code that makes the embedded video resize to the current screen width, making the video responsive.

It also makes your site comply with EU cookie law and addresses accessibility issues that YouTube videos introduce into your webpage.

play icon circular tealTuition Video

You can embed video content from almost any video hosting provider. 
Popular hosting platforms include: YouTube, Vimeo, and Facebook. However, videos on these platforms cannot be made internal-only.
You can make your video content either visible to everyone or else internal-only by creating / hosting it on: HEAnet Media, or Kaltura 
For internal-only videos, you can also use MS Stream

Embedding YouTube Videos

For Youtube, get the embed code by:

  1. Browsing to your video
  2. Clicking 'Share' (underneath the video)
  3. Clicking 'Embed'
  4. Click on 'Copy' (bottom right corner)
  5. The embed code is now ready to be pasted into the 'Embedded video' content type.
    Accessibility Note: Do not discriminate against 16% of your audience - Ensure the <iframe> tag contains a title attribute (e.g. title="course promotional video")

The following is a YouTube video, embedded this way:

 

Vimeo Example

Another popular video site is Vimeo.
To get the Vimeo embed code:

  1. Browse to vimeo.com and search for your video
  2. Click on the video you want to embed
  3. Hover over the video (as it's playing) and click on the share icon (this looks like a paper aeroplane).
  4. Click on the embed code in the window that pops up.
  5. Select from <iframe... to /iframe> and press Ctrl-C to copy it  (Apple users: use Command-C instead).
    The embed code is now ready to be pasted into the 'Embedded Video' content type.
    Accessibility note: Ensure the iframe tag has a title attribute in it - e.g. title="welcome video"

Below is an embedded Vimeo video:

 

Facebook

Even Facebook videos can be made responsive, using this content type.  But remember to remove the references to &width=??? and &height=???  in the video URL and also make sure the embed code says width="100%" height="auto". Finally, ensure the iframe tag contains a title (e.g. title="welcome video")

The video must be public for the Embed code to be available.

Click the three dots on the right-hand side column and select Embed.  Copy the code that appears and paste it in.

Accessibility note: Ensure the iframe tag has a title attribute in it - e.g. title="welcome video"

 

Restricting your audience (internal-only videos)

YouTube , Vimeo, Facebook and Instagram are public services. Sometimes the university wants to make videos available to an internal audience only. In this case, we cannot use a public service.

All of the following media hosting services allow you to either show your video publically or else restrict their viewing to University of Galway students & staff only:

HEAnet Media

To upload a video to this service:

  1. Login to http://media.heanet.ie/ 
    Choose University of Galway and login with your campus account.
  2. Upload your MP4 video (it must be in this format)
  3. Wait for video to transcode
  4. Get the embed code for video.

To get the embed code for a video you already uploaded:

  1. Click on your video thumbnail
  2. Under the full-width video that appears, click 'Share'
  3. Select the contents that appear: (everything from <iframe ... to ... /iframe>) and user Ctrl-C / Command-C to copy it.

You are now ready to paste this embed code into an 'Embedded Video' content type.
Accessibility note: After you paste it into the CMS, ensure the iframe tag contains a title attribute - e.g. title="welcome video"

Note: Remember to click on 'Access control' under the video to ensure that the correct audience can see the video.

Here's an example of an embedded video from HEANet's media service:

 

Kaltura

Kaltura is a service that is managed by CELT and integrated into BlackBoard.  CELT have complete documentation for Kaltura online.

Once you've created your Kalture video, use the Share button, underneath it, to get its embed code.
This can then be copied into an 'NUIG Code Only' content type (you don't need to use an 'Embedded Video' content type because Kaltura's code already has all the elements needed to easily make it responsive).

After you paste the embed code into your 'NUI Code Only', do the following to make the embedded video responsive (i.e. work on any device / screen size):

  1.  Change both the max-width and width settings from its pixel value (e.g. 400px) to 100%
  2. Change the height value from its pixel value (e.g. 285px) to auto

The end result will look something like this:

<div style="max-width:100%"><div style="position:relative;padding-bottom:71.25%"><iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/723092/sp/72309200/embedIframeJs/uiconf_id/10715642/partner_id/723092?iframeembed=true&playerId=kaltura_player&entry_id=1_mi4hw374&flashvars[localizationCode]=en&amp;flashvars[leadWithHTML5]=true&amp;flashvars[sideBarContainer.plugin]=true&amp;flashvars[sideBarContainer.position]=left&amp;flashvars[sideBarContainer.clickToClose]=true&amp;flashvars[chapters.plugin]=true&amp;flashvars[chapters.layout]=vertical&amp;flashvars[chapters.thumbnailRotator]=false&amp;flashvars[streamSelector.plugin]=true&amp;flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&amp;flashvars[dualScreen.plugin]=true&amp;flashvars[hotspots.plugin]=1&amp;flashvars[mediaProxy.mediaPlayFrom]=0&amp;flashvars[mediaProxy.mediaPlayTo]=208&amp;flashvars[Kaltura.addCrossoriginToIframe]=true&amp;&wid=1_idst70wx" width="100%" height="auto" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-pointer-lock allow-popups allow-modals allow-orientation-lock allow-popups-to-escape-sandbox allow-presentation allow-top-navigation-by-user-activation" frameborder="0" title="Kaltura Player" style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe></div></div>

which will embed the kaltura video in your page.  E.g:

 

MS Stream

MS Stream is part of Office 365 and is integrated with MS Teams.  When you record a video/meeting on MS Teams it gets published to MS Stream.  You can record your videos directly on MS Stream or upload ones you made elsewhere.  It will automatically generate captions for your video using voice recognition software - and you can edit them afterwards in case it mis-heard anything.  This is excellent for meeting the EU-wide minimum standards for web content accessibility. 

You can set the permissions for your stream video to be visible to individuals, groups, or everyone in NUI Galway.  Stream videos cannot be seen by someone outside NUI Galway. 

The easiest way to embed a stream video is to 

  1. Go to https://web.microsoftstream.com/studio/videos and find your video
  2. Click 'Share' (beneath the video) and then 'Embed'
  3. Leave the responsive option turned off and copy the embed code by selecting it all and using the 'Ctri-C' keyboard shortcut.  (Use 'Command-C' on a Mac)
  4. Paste this into an 'Embedded Video' content type with Ctrl-V (or Command-V)
  5. Change the width to 100%
  6. Change the height to auto
  7. Add in title="video name"

<iframe width="100%" height="auto" title="Site Manager Introduction" src="https://web.microsoftstream.com/embed/video/8607c95f-f96d-4a9b-83a5-614a832358dc?autoplay=false&showinfo=true" allowfullscreen style="border:none;"></iframe>

This will result in a responsive video.  E.g: