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.

You can embed video content from almost any video hosting provider. 
Popular hosting platforms include YouTube, and Vimeo. 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.
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:

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:

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 the University.  Stream videos cannot be seen by someone outside of the University of Galway. 

The easiest way to embed a stream video is to 

1. Go to https://www.microsoft365.com/launch/stream 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 'Ctrl-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: