Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.
Contact Libraries      Portal Login

Standards and Guidelines: Video Widgets and Embedding Videos

Status Note

This page contains instructions on how to embed codes using video widgets. It also gives instructions for the alternative option to use video screen grabs to link to videos.

Published: Content approved by Group 2 members.

Essential - Embedding video codes - updated 23/06/2021

Adding ClickView videos - updated instructions 29/08/2020

 

Essential - Embedding Video Codes      Required

  • It is advisable to add only one embedded video per page because they can take up a lot of space. Additional videos can be added as links.
  • Box name: Featured Video or the title of the video e.g. Workplace Health and Safety Induction (2015) if you have only one embedded video. If you list additional videos use Featured Videos as box name.
  • Preference should be given to the most current version.
  • Use Add/Reorder > Media / Widget to add the embed code for videos.
  • The video size should be width="560" height="315". Adjust the video size if required.
  • Name the widget clearly e.g. Video widget: Workplace health and safety induction (2015). This will help to find it in the Assets.
  • Add the video also as link (See instructions) below the embedded video. This is required for accessibility because the widget does not have an option to add alternative text.
  • Add the video link to Assets and reuse the eVideo link from the Assets. Add the link below the embedded video. You can remove the item type eVideo because it is obvious that it is an eVideo.
  • The description of the reused video link can be modified as well.
  • Keep the description short or use Hover over item title to hide the description.
  • Add further bibliographic information separated by commas in the description field above the description e.g. name of the provider, series information, duration, closed captions information etc

Vimeo videos: adjust video size in the code and remove the video information and add the link to video as described above.

Example of changes to a Vimeo embed code

<iframe src="https://player.vimeo.com/video/127940467?title=0&byline=0&portrait=0" width="560" height="315" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

<p><a href="https://vimeo.com/127940467">An Introduction to Digital Accessibility</a> from <a href="https://vimeo.com/tinmouseanimation">Tinmouse Animation Studio</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

 

Tips for embedding YouTube videos

  • At the YouTube video click SHARE beneath the video and then select Embed.
  • Below the iFrame code you get the following options.

 

1. Option: you can modify the start time to avoid ads at the start of the video. Test which start time is best for the video you want to embed.

2. Option: Show player controls

3. Option: The privacy-enhanced mode is a new option that improves privacy. When enabled, YouTube will not store information about users unless users interact with those videos.

Please note: The option to untick suggested videos is no longer available. 

Adding LinkedIn Learning Videos    Required

  • The embed code for LinkedIn Learning videos is currently not available.
  • Use a screenshot of the video instead that simulates an embedded video and link the screenshot to the video.
  • Find the video you want to display in LinkedIn Learning and make sure the Watch Now graphic is displayed (See example)

Use the following instructions to create an appropriately sized image which will load quickly. Images of video screenshots can be stored in the personal folder.

  • Add the screenshot using the Rich Text/HTML feature and link the screenshot to video. Make sure that the link opens in a new window. Add View video as as alternative text.
  • For consistency the width of the video image should always be 560 px.
  • Add the video also as link (See instructions) below the embedded video.
  • Add the video link to Assets and reuse the eVideo link from the Assets. Add the link below the embedded video. You can remove the item type eVideo because it is obvious that it is an eVideo.
  • The description of the reused video link can be modified as well.

Featured Video (LinkedIn Learning Example)

View video

Adding ClickView Videos    Required

  • Find the Clickview video you want to embed.
  • Click on Share below the video screen and then on Embed.
  • Copy the code provided at Embed this video.
  • Use Add/Reorder > Media / Widget to add the embed code for videos.
  • Name the widget clearly e.g. Featured video: Balance sheets (2019). This will help to find it in the Assets.
  • Add the video also as link (See instructions) below the embedded video. This is required for accessibility because the widget does not have an option to add alternative text.
  • Add the video link to Assets and reuse the eVideo link from the Assets. Add the link below the embedded video. You can remove the item type eVideo because it is obvious that it is an eVideo.

undefined

Featured Video (YouTube Example) Description Displayed Beneath

Featured Video (Vimeo Example) Description as Hover Over

Adding Films on Demand Videos    Required

  • A password protected embed code is currently not available for FoD videos which means these videos cannot be embedded.
  • Use a screenshot of the video instead that simulates an embedded video and link the screenshot to the video.
  • Find the video you want to display in Films on Demand and use the screen displayed at the video record. Make sure the play button graphic is displayed (See example).

Use the following instructions to create an appropriately sized image which will load quickly. Images of video screenshots can be stored in the personal folder.

  • Add the screenshot using the Rich Text/HTML feature and link the screenshot to video. Make sure that the link opens in a new window. Add View video as as alternative text.
  • For consistency the width of the video image should always be 560 px.
  • Add the video also as link (See instructions) below the embedded video.
  • Add the video link to Assets and reuse the eVideo link from the Assets. Add the link below the embedded video. You can remove the item type eVideo because it is obvious that it is an eVideo.
  • The description of the reused video link can be modified as well.

Virgin Birth (2014)

View video

Adding Safetyhub Videos    Required

  • A password protected embed code is currently not available for Safetyhub videos which means these videos cannot be embedded.
  • Use a screenshot of the video instead that simulates an embedded video and link the screenshot to the video.
  • Find the video you want to display in Safetyhub.
  • Please note: you get the best screenshot if you add the embed code to a hidden box using the Media / Widget feature while being logged in to Safetyhub (See example)
  • Create the screenshot using the Snipping Tool. Remove the hidden box after completing the instructions below.

Use the following instructions to create an appropriately sized image which will load quickly. Images of video screenshots can be stored in the personal folder.

  • Add the screenshot using the Rich Text/HTML feature and link the screenshot to video. Make sure that the link opens in a new window. Add View video as as alternative text.
  • For consistency the width of the video image should always be 560 px.
  • Add the video also as link (See instructions) below the embedded video.
  • Add the video link to Assets and reuse the eVideo link from the Assets. Add the link below the embedded video. You can remove the item type eVideo because it is obvious that it is an eVideo.
  • The description of the reused video link can be modified as well.

Featured Video (Safetyhub Example)

View video

Featured Video (ClickView Example)