- Taxonomic name: M-LARGE-VIDEO
- Extension: LONG-FORM-ARTICLE
- Current owner: Framework
- Added on: v5.2.0 (17/11/20)
- Updated on: v5.6.0 (20/04/21)
Large video player
The large video player is a variant of the standard Framework video player which spans the full width of the design grid. Its purpose is to add a layer of interaction and delight to a predominantly static article page, and will promote footage, conversations and interviews supporting the long form article content.
Design and usage
- Videos require a title and description; these will be hidden visually in this instance, but are required for assistive technologies such as screen readers
- Do not auto-play videos
- The video tag does not work in IE8; a native video player is used for IE9, IE10 and mobile devices
For full details of the video component, see video documentation.
Structure
Video player
- 12 columns desktop / 8 columns tablet 4 columns mobile
- Default 16:9 aspect ratio
- Poster image fallback
Transcript show/hide:
- Width as per long form article text
Labels
- Visually hidden heading and description are mandatory
Accessibility and screen readers
- Image/text contrast inline with pre-existing WCAG guidelines and established Framework components
- Transcript always included below all video player
Non-JS requirements and considerations
- As per standard Framework video component
Placement
- Anywhere within the main chapters section of a long form article page
Examples
Interactive example
Code example
<div class="m-large-video" itemprop="video" itemscope itemtype="https://schema.org/VideoObject">
<h3 class="a-heading a-heading--2 a-heading--light u-hidden--visually" itemprop="name">...</h3>
<p class="u-hidden--visually" itemprop="description">...</p>
<video src="..." poster="..." controls data-module="m-media-player">
<meta itemprop="duration" content="..." />
<meta itemprop="thumbnailUrl" content="..." />
<meta itemprop="embedURL" content="..." />
<meta itemprop="uploadDate" content="..." />
<meta itemprop="height" content="..." />
<meta itemprop="width" content="..." />
<meta itemprop="encodingFormat" content="mpeg4" /> <track label="..." kind="subtitles" srclang="..." src="..." />
... <a href="..." class="m-media-player-download">
<picture class="m-media-player-download__image">
<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
...
<source type="image/webp" srcset="..." width="..." height="..." />
<img src="..." decoding="async" width="..." height="..." alt="" />
</picture>
<span class="m-media-player-download__text a-button a-button--download">Download MP4 video file<span class="u-hidden--visually"> of ...</span></span>
</a>
</video>
<div class="m-showhide m-showhide--transcript" data-module="m-showhide" data-module-load="true">
<h3 class="a-heading a-heading--3 a-heading--light m-showhide__heading">Transcript</h3>
<div class="m-showhide__content" itemprop="transcript">
...
</div>
</div>
</div>Development and test
Notes for developers
The Large Video Player is a variant of the standard Framework video player, but which spans the full width of the design grid - please refer to video documentation on how to correctly set up that component.
Extension component
This component forms part of the 'long-form-article' and 'media' extensions and so requires additional style sheets to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional style sheets:
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/heroes.css" rel="stylesheet" />
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/long-form-article.css" rel="stylesheet" />
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/media.css" rel="stylesheet" />Notes for testers
- Ensure that all videos files have a fallback included for when they can't be played or loaded
- Ensure there are controls which enable users to be in charge of the media and which can be accessed via the keyboard
- Ensure that all videos have a full text transcript
- Length of playback time should be included for video files
- Older browsers which do not support HTML5 video should be presented with a download link for the video file
- Some browsers, including mobile versions, may play the video file with the native player
Known accessibility issue
A user can gain focus of the progress bar for the video player, but they are unable to adjust where they are in the video using the keyboard.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-large-video |
Container for large video player | No | div |
Allows video to fill full 12-column grid at desktop |
Keyboard operations
- TAB
-
Tabbing to an video or audio control will make it clearly visually different so that the focus point on the page is obvious to the user.
- SPACE or ENTER
-
With focus on play, pause, mute or full screen, pressing SPACE or ENTER will trigger the relevant behaviour.
- Known accessibility issues
-
A user can gain focus of the progress bar for the audio or video player but they are unable to adjust where they are in the video using the keyboard.
Component releases
- Added on: v5.2.0 (17/11/20)
- Updated on: v5.6.0 (20/04/21)
Latest update:
- updated: To improve page load and layout times the additional attributes decoding="async", width and height must be set on all inline images.
- updated: Markup has changed to use the
pictureelement to improve page performance by allowing different sized images to be served for different screen sizes.