Adding subtitles to videos

TL;DR

  1. Book a subtitles job
  2. Upload the subtitle files
  3. Test the subtitles

Why subtitle?

We want as many people as possible to enjoy and share our videos, so we should subtitle them whenever possible – this is why:

  • Subtitles make our videos easier for users to find in Google.
  • They make our content more accessible to deaf/hard of hearing users and to people who have English as a second language.
  • They are useful for watching a video with the sound down.

To create in house subtitles, see here for the guidelines

Book a subtitling job

Subtitles are built into the production cost of all First News commissioned videos, eg, Just The Job, so don’t forget to order them!

We use Access Subtitling to create our subtitle files. They have more than 20 years’ experience working for the BBC, Channel 4, etc, and are very nice people.

Drop an email to [email protected] for a quote and copy in [email protected]. When the deal has been done send the videos in a WeTransfer link.

Upload the subtitle files

Subtitles are sent to this shared folder on Steve Smith’s Google Drive. Contact him for access if you need.

Our subtitles are supplied in different formats for First News Live and Vimeo (.vtt), YouTube (.slt) and Facebook (.srt). For Twitter and Instagram use burned in subtitles.

Add a subtitle file to First News

Upload the .vtt subtitle file to the Media Library or click Add File in your post and navigate to the file on your computer.

Preview the post, then click the burger menu in the bottom left of the video and choose English as the subtitles.

Add a subtitle file to YouTube

Follow YouTube’s instructions, using the .slt format subtitle file.

That’s it for adding subtitles to videos for the mo

How to edit a homepage widget

These guys. How do you edit these guys? It’s nice and easy to edit a homepage widget, read on.

  • Log in to the Admin
  • Go to the homepage
  • Click Edit Page

  • You should see the Admin view below. If not, click Backend Editor

  • The modules in the right hand column of the homepage are highlighted below in red

  • Hover your mouse over the one you want to change and click the green pencil icon to edit it

  • Edit the Title, Content plus the Button Link Title and URL.
  • Click Save changes

  • Click Update to update the homepage
  • Check the homepage

That’s it for editing a homepage module for the mo

How images are optimised on First News Live

The what

The good news is that our images are all optimised automatically on upload. No change to workflow is needed. You don’t need to do anything. Except know.

The how

  1. Images are resized to max width of 1920px and max height of 1080px. This is large enough to ensure they display well on retina devices.
  2. PNGs are converted to JPGs.

The why

The result can be a dramatic reduction in the size of the page, which means a faster load time, which should mean site visitors view more pages and stay longer. Which means better engagement stats and more advertising revenue. £££. That’s why. That said there are additional things to do to make our images work better for our users and for Google, eg naming of images, alt text.

Below is a screencrab example of a huge JPG being optimised correctly for the site.

The cost

We use the EWWW plug in and buy credits.

“Start optimising right away for only 99¢ (330 credits). The subscription renews monthly with automatic payments at the end of each billing cycle. Charges are only issued once you run out of credits and accumulate a balance of 3,000+ credits ($9), and you only pay for what you use (no usage, no charges).”

How many images credits are we using per week?

  • Tuesday 15 Aug 3pm – 6112 credits remaining
  • Weds 15 Aug 3pm – xxxx credits remaining
  • Thurs 15 Aug 3pm – xxxx credits remaining

Each credit is spent on each cut of an image – there are 7 cuts per image, used in different parts of the site:

thumbnail – 150 x 150
medium – 300 x 300
medium_large – 768 x 9999
large – 1024 x 1024
news-card-image – 1020 x 454
resource-card-image – 500 x 155
pdf-cover-image – 380 x 475

That’s it for how image optimising works for the mo.

Use an image instead of a video in a post

*This is a workaround, while a ticket is being worked on by the dev team.*

Sometimes you want to publish a post with an image instead of a video at the top. Follow these steps to achieve that.

  • Upload the image you want to use instead of a video to the Media Library
  • Copy the image URL into a text file – you’ll need it in a few minutes

  • Build your post as normal. You will actually need to add a video file to create a placeholder in the code. We will replace this video and its placeholder code with your image in the next step
  • Click the Backend Editor if you are not already in Visual Composer

  • Click the plus button at the bottom of a Visual Composer row to bring up the Add Element screen

  • Choose Raw JS

  • Paste in this javascript
<script type="text/javascript">
$('.flowplayer').html('<img src="IMAGE-PATH-GOES-HERE"/>').css('background-image','none').removeClass('flowplayer');
</script>
  • Replace IMAGE-PATH-GOES-HERE with the full image URL from the Media Library, so it looks something like this:
<script type="text/javascript">
$('.flowplayer').html('<img src="https://live.firstnews.co.uk/wp-content/uploads/sites/2/2017/07/nature-1920x1080.jpg"/>').css('background-image','none').removeClass('flowplayer');
</script>
  • Click Save changes to close the Visual Composer window
  • Click Update to update the post
  • Click Preview and check your post

That’s it for replacing the video with an image for the mo

Using the first.news shortlink in the newspaper

TL;DR

There are three steps to using a first.news shortlink in the newspaper.

  1. Create a campaign link here
  2. Shorten the campaign link here
  3. Test it!

Introduction

A URL shortener, or shortlink (eg, bit.ly, t.co or goo.gl) helps a user get to a webpage without having to type in the whole URL.

  • First News has its own shortlink – first.news. We should use it whenever possible in the newspaper and for other offline marketing, eg, email, radio, posters, TV campaigns – it’s also good for branding and building trust.
  • Remember to always set up a campaign URL – see below – as part of the shortlink, so we can track interaction between the paper and the website.
  • Using the first.news shortlink in the newspaper makes it quicker for our newspaper readers to get to the website, allows us to better track the behaviour of our web users in Google Analytics and can help to drive subscriptions. Plus, it’s a bit geeky 🙂

How to use it

  • Think of a short and snappy shortlink to put in the paper. Use it in a sentence that is active and enticing, but avoid clickbait. Below is how the first.news/billjack link appears in the paper – a great example of how to do it.
  • NOTE: You can start using a shortlink even if the webpage hasn’t been built yet, but the shortlink must be set up before the paper is on sale, otherwise your carefully crafted shortlink will go nowhere!

  • OK, let’s make a link. You can set this up yourself or ask the digital team to do it for you. Either way, please use the settings below.

1 Create a campaign link

  • Go to the Google Campaign URL Builder and fill in these fields:
    • Website URL: the full URL of the webpage
    • Campaign Source: paper
    • Campaign Medium: shortlink
    • The Campaign Name is not required but, for this example, we’ll put lovewins, because this will let Google Analytics show how many pageviews were generated by all the Love Wins stories in the newspaper.

  • The campaign URL is generated dynamically further down the page. Click the Copy URL button (not the Convert… button).

2 Shorten the campaign link

  • Go to the first.news shortlink service. If you need to sign in, see the digital team for the deets.
  • In the Enter the URL box, paste the campaign link you generated above.
  • In the Custom short URL box, enter your shortlink, eg, billjack.

  • Click Shorten The URL – your shortlink is created. Yay.

3 Test it!

  • In a new browser tab or window, type in your shortlink and press return. You should be redirected to the campaign URL.
  • Google Analytics will count a pageview for your page and record the source/medium as from the paper / shortlink

  • This means we can build a picture of the people who visit the website after seeing a link in the paper. This is valuable data that can be used for marketing campaigns and for deciding what content to create.

A bit more about the first.news shortlink

  • You can use the first.news shortlink to link to any URL, including someone else’s website. However, consider that users might expect to go to the First News website if they click a first.news shortlink so, if you’re linking to a site other than our own, you should do two things:
  1. Make it explicit in the text that the link goes elsewhere, eg, ChildLine
  2. Incorporate their site in the shortlink, eg, first.news/childlineworries
  • This way, it should be clear to the user you are sending them away from the First News site. Also, an alert like the one below will pop up.

That’s it for shortlinks for the mo.

Video subtitling guidelines

Introduction

First News aims to be as accessible and usable as possible for every user. Our videos are subtitled for the hard of hearing, for people who have English as their second language or for anyone who wants to watch with the sound off.

  • First News subtitles are produced by Access Subtitling, who have 20 years’ experience working for all the major broadcast channels – BBC, ITV, Channel 4, Channel 5 and Sky – as well as films and DVD. They have supplied the guidelines below for generating subtitles on First News Live.

Subtitle guidelines summary

  • Timing: At least two seconds for one line of text and at least 3.5 seconds per two lines of text.
  • Grouping: Keep a natural grammatical structure so the viewer can understand each subtitle line before it disappears.
  • Style: Generally use 42 characters per line, with a maximum of 44 to avoid awkward subtitle breaks or very fast subtitles.

Teach yourself subtitling in 5 minutes

  • Watch this news video with automatic YouTube subtitles.
  • Watch the same news video with the subtitles reworked.
  • Have a little discussion about any differences you notice.
  • Read this PDF: Introduction to subtitling (opens in a new tab).
  • Watch the original and reworked versions without sound again, making note of the suggested techniques.

How to use the subtitle files

  • Our subtitle files are supplied in a variety of formats, plus a copy of the video with the subtitles burned in. The main video platform is included in the file name, eg, YouTube_Banoffee pie.stl
  • Use these file extensions for these platforms:
    • First News Live – .vtt
    • Facebook – .srt
    • YouTube – .stl
    • Vimeo – .vtt
    • Twitter, Instagram – burned in subtitles
  • Read more about the importance of website accessibility.

That’s it for subtitles for the mo.

First News video specs

These are the recommended video settings for First News videos. They are what YouTube recommends and as used by First News Productions.

  • Container: MP4
  • Codec: h264
  • Aspect ratio: 16:9
  • Frame rate: 25fps
  • Resolution: 1920×1080
  • Video bitrate: 8-12Mbps
  • Audio codec: AAC, 48kHz, stereo
  • Audio bitrate: 384kbps

That’s it for video settings for the mo.

How search on First News Live works

That’s it for search for the mo.