Design

business.gov.au branding

No branding

All breakpoints

Video title

A short description promoting the video can be placed here.

Transcript text displays in here.

Transcripts should be descriptive. Descriptive transcripts for videos also include visual information needed to understand the content.

Descriptive transcripts are needed to provide audio and video content to people who are both Deaf and blind. They are also used by people who process text information better than audio and visual/pictorial information.

Things to include in descriptive transcripts:

the names of all speakers

all speech content

relevant non-speech audio. For example, if the speaker has a glass of water and puts it down on a table and it makes a noise

any textual or graphical information. For example, if a chart is shown, the transcript needs to introduce it

indicate when it’s the end of the transcript.

All breakpoints

Apply your brand specific colours, borders and icons to the base video player shown below.

Video title

A short description promoting the video can be placed here.

Transcript text displays in here.

Transcripts should be descriptive. Descriptive transcripts for videos also include visual information needed to understand the content.

Descriptive transcripts are needed to provide audio and video content to people who are both Deaf and blind. They are also used by people who process text information better than audio and visual/pictorial information.

Things to include in descriptive transcripts:

the names of all speakers

all speech content

relevant non-speech audio. For example, if the speaker has a glass of water and puts it down on a table and it makes a noise

any textual or graphical information. For example, if a chart is shown, the transcript needs to introduce it

indicate when it’s the end of the transcript.

Layouts

Video players can be used in all page layouts except the Two column - filter page layout.

Layout:

The content area is 12 grid-columns wide.

Video players span 8 grid-columns each.

The content area is 12 grid-columns wide.

Video players span 9 grid-columns each.

The content area is 12 grid-columns wide.

Video players span 12 grid-columns each.

The content area is 8 grid-columns wide.

Video players span the full width of the content area.

The content area is 9 grid-columns wide.

Video players span the full width of the content area.

The content area is 11 grid-columns wide.

Video players span the full width of the content area.

The content area is 12 grid-columns wide.

Video players span the full width of the content area.

The content area is 9 grid-columns wide.

Video player components span the full width of the content area.

The content area is 10 grid-columns wide.

Video player components span the full width of the content area.

The content area is 12 grid-columns wide.

Video player components span the full width of the content area.

The content area is 8 grid-columns wide.

Video players span the full width of the content area.

The content area is 9 grid-columns wide.

Video players span the full width of the content area.

The content area is 12 grid-columns wide.

Video players span the full width of the content area.

The content area is 8 grid-columns wide.

Video players span the full width of the content area.

The content area is 12 grid-columns wide.

Video players span the full width of the content area.

The content area is 8 grid-columns wide.

Video players span the full width of the content area.

The content area is 11 grid-columns wide.

Video players span the full width of the content area.

The content area is 12 grid-columns wide.

Video players span the full width of the content area.

Guidelines for use

Purpose:

The video player component displays video in a content page with the ability to play and pause. It includes a title, optional description and a transcript that displays in time with the video.

When to use this component:

  • We use video as secondary information to reinforce the message on a content page.
  • On customer story pages, video may be used as the primary content without page body content.

Content rules

  • On 101, tutorial pages, transaction pages, resource articles, news articles or grant landing pages, provide lead in content above the video.
  • When embedding video, insert only the YouTube ID (not the full URL) for the transcript to play correctly (e.g. NPBAdEfO9h0, rather than https://youtu.be/NPBAdEfO9h0>
  • YouTube transcripts must be UK English to play on our site.

Version history

30 October, 2023

  • Update the appearance of the video player to incorporate the default appearance of HTML video tag controls.
  • Move video description from below the video player to above.
  • Removed the time stamp.
  • Restyled the transcript which will no longer be interactive.

8 August, 2023

  • Added an additional layout (the Two column - tool page alternate layout).

Call to action toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Changes to this contract are being autosaved.