Standards and Guidelines: Video Widgets and Embedding Videos

Embedded eVideos - examples

• It is advisable to add only one embedded eVideo per page because they can take up a lot of space. Additional eVideos can be added as links.
• Box name: Featured eVideo or the title of the eVideo e.g. Workplace Health and Safety Induction (2015) if you have only one embedded eVideo. If you list additional eVideos use Featured eVideos as box name.
• Preference should be given to the most current version.
• Use Add/Reorder > Media / Widget to add the embed code for eVideos.
• The eVideo size should be width='560' height='315'. Adjust the eVideo size if required
• Name the widget clearly e.g. eVideo widget: Workplace health and safety induction (2015). This will help to find it in the Assets. Don't include pipes, emoticons and symbols (See instructions).
• Add the eVideo also as link (See instructions) below the embedded eVideo. This is required for accessibility because the widget does not have an option to add alternative text.
• Add the eVideo as a Link. Add the link below the embedded eVideo. 
• The description of the reused eVideo link can be modified as well.
• Use sentence case for the description, except when including the item title which should be in title case.
• 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 eVideos: adjust eVideo size in the code and remove the eVideo information and add the link to eVideo 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>

• At the YouTube video, click SHARE beneath the eVideo 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 eVideo. Test which start time is best for the eVideo 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 eVideos.

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

• The embed code for LinkedIn Learning eVideos is currently not available.
• Please do not use LinkedIn as a feature eVideo.
• Instead follow the instructions for adding a Database or Collection Boxes by Provider: LinkedIn Learning Example.

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

• A password protected embed code is currently not available for FoD eVideos which means these eVideos cannot be embedded.
• Use a screenshot of the eVideo instead that simulates an embedded eVideo and link the screenshot to the eVideo.
• Find the eVideo you want to display in Films on Demand and use the screen displayed at the eVideo 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 eVideo screenshots can be stored in the personal folder.

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

• A password protected embed code is currently not available for Safetyhub videos which means these eVideos cannot be embedded.
• Use a screenshot of the eVideo instead that simulates an embedded eVideo and link the screenshot to the eVideo.
• Find the eVideo 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 eVideo. Make sure that the link opens in a new window. Add View eVideo as as alternative text.
• For consistency the width of the eVideo image should always be 560 px.
• Add the eVideo also as link (See instructions) below the embedded eVideo.
• Add the eVideo link to Assets and reuse the eVideo link from the Assets. Add the link below the embedded eVideo. 
• The description of the reused eVideo link can be modified as well.