A Quick Guide to…Embedding Videos in T4

For University web editors who have gone through Go Mobile and are using T4 to edit their sites, here’s a refresher on how to embed video content.

In the new responsive template videos are embedded using the content type ‘06. External Media’. They should be hosted on a dedicated delivery service, eg YouTube.

Before embedding a video you should check that it relates to and supports your written content.

You should also check the thumbnail for the video. If it’s caught between frames or doesn’t seem appropriate, don’t use the video and flag the issue with whoever uploaded it to the channel.

Embed code

When adding a video to your content always take the web address from the video’s embed code.

Screenshot of protecting coral reefs video on YouTube

Protecting coral reefs video on YouTube

You’ll also need to make sure the option to ‘show suggested videos when the video finishes’ is unchecked. Otherwise you run the risk of unrelated videos, or worse competitors’ videos, being pulled into your page.

Screenshot of embed code for a video on YouTube

Embed code for Protecting Coral Reefs video on YouTube

Example

The video embed code will look something like this: https://www.youtube.com/embed/X_skPHdKQgA?rel=0

The code for the Protecting Coral Reefs video is X_skPHdKQgA, while the part of the code that ensures no additional videos are pulled in is: ?rel=0.

Adding to T4

When adding to T4:

  • add the prefix and name of the video
  • paste in the embed code to the Media URL field
  • add a caption to give context (limited to 50 characters)
  • don’t duplicate the video title in the caption if already displayed in the media player
  • select the most appropriate alignment for the video
Screenshot of video embed screen in T4

Screenshot of video embed screen in T4 (select to view larger image)

Alignment

On desktop, you can choose to align videos to the right of your content or make them full width so they stretch to the size of the screen.

We recommend using the full width option with caution, though – this often reduces the quality of the video. It can also look more cluttered and can make it harder for the user to find the answers to their questions.

On mobile, videos behave the same as images – stretching to fill the width of the screen and flowing below content.

Load time

We recommend that you only add one video per page. This is so that you don’t bombard the user with too much video content, but more importantly so that you don’t slow down the load time of the page.

Find out more

Check our T4 Moderator guide for how to embed external media (University login required).

Visit our website to find further advice and support about video hosting (University login required).

Related posts

Share this post:
Share

A Quick Guide to…Dates and Times

We’ve standardised how we write dates and times on our sites. This makes it easier for visitors to work out when things are happening.

It also makes scanning a page for key information much quicker.

In the latest of our Quick Guide series, here’s a timely reminder of our best practice for dates and times:

Dates

Dates have no punctuation.

The order should be day month year eg Thursday 4 August 2016.

A date range should look like this:

  • 2011 to 2012
  • Friday 28 February to Monday 3 March

Sometimes space is an issue, eg in tables. In this case, it’s fine to use truncated months eg Jan, Feb, Mar.

We’ve also set standards for writing decades and centuries:

  • 1930s not 1930’s
  • 20th century not twentieth century

Times

We use the 24 hour clock.

This makes times accessible to international audiences.

Here are some principles for presenting times:

  • 17.30 not 5:30pm or 1730hrs
  • 00.00 not midnight
  • 12.00 not midday or 12 noon

For periods of time, you can use a hyphen between start and end times. For example, 10.00 – 11.30

Share this post:
Share

A Quick Guide to… Bold

Bold text makes web pages easier to read and more SEO friendly.

You should use bold to highlight key phrases in your copy. There should be enough to help users scan the page, but not so much that it loses impact.

This quick guide will help to clarify why, when and how to use bold text.

Why to use bold

Nearly 80% of users will scan a web page before they read it; they’ll jump around the page, looking for things that catch their eye.

This means that content must communicate key messages at a glance, by drawing attention to important bits of information. One way to do this is to create visual pointers using bold text. The impression created by these visual pointers tells both humans and computers (like Google) what to expect from the rest of the content.

03geordi

To boldly go… Both humans and computers respond well to bold text.

When to use bold

You should bold text that:

  • communicates important information
  • emphasises key points
  • makes sense out of context
  • complements your titles and headings

You should avoid bolding:

  • entire sentences or paragraphs
  • too many individual words

Bold text can be used on pages and in news items.

How to use bold

Finish creating content for a page before you start adding bold to it. Then, pick out the most important pieces of information and make them bold.

An easy way to check if you’ve used bold effectively is to collect your bold phrases into one list. If you gave this list to a user, would they get the right impression about that page?

Share this post:
Share

Time and the 24 Hour Clock – Editorial Style Update

We’ve recently updated our editorial style guide to reflect a change in our content standard relating to time.

We’re now using the 24 hour clock to represent times on our website. We find it’s better for international audiences and for displaying time in lists and tables.

See the full update to our editorial style guide on our website (University login required).

Share this post:
Share