NordSecurity.Design

Video Player YouTube

Overview

There are multiple ways to place a video on the page including using the VideoPlayer and VideoPlayerYoutube components.

When to use

  • VideoPlayer: Displays videos uploaded directly to Bynder with essential playback controls like play, pause, and volume.
  • VideoPlayerYoutube: Embeds YouTube videos, leveraging YouTube’s native player and interface.

When not to use

  • For animated GIFs: Use the Picture component to display animated GIFs, as they do not require the functionality provided by a video player.

Anatomy

  1. Video
  2. VideoPlayerButton

Variants & States

AspectRatio

VideoPlayer supports the following video aspect ratios

  • 21 : 9
  • 16 : 9
  • 4 : 3
  • 1 : 1
  • 3 : 4
  • 9 : 16

The default AspectRatio is 16 : 9.

Video Player in a Section

If you want to use the VideoPlayer and VideoPlayer-YouTube components, it is highly recommended to place them within the grid cols-1 span-2 gap/8/2 gap [1-1-1-1-1]. This layout ensures that the video size is well-controlled and displayed proportionally on the screen. Using this grid will help maintain a consistent and visually appealing layout for your video content.

Internationalization

For RTL languages, no additional adjustments are required. The control buttons for video does not require any changes.

Properties

Name Type Values Description
responsive Boolean true
false		 Height is changing according to specified aspect ratio
aspectRatio String "" Sets the aspectRatio of the video.
Default: 16 : 9
noLazy Boolean true
false		 Initializes video in advance
controls Boolean true
false		 Shows play, pause and other video controls
loop Boolean true
false		 Endlessly repeats video
muted Boolean true
false		 Plays with no sound
autoplay Boolean true
false		 Allows the video to start playing automatically

Usage Guidelines

DoWhen placing the VideoPlayer as a standalone element within a section, it is recommended to use a grid layout with cols-1 span-2 gap/8/2 gap [1-1-1-1-1].
DoFor videos longer than 5 seconds, always provide controls to allow users to navigate through the video.
DoAlways provide videos with captions to ensure accessibility and inclusivity for people with hearing impairments, non-native speakers, and those in noisy environments.
Don’tDon't use the VideoPlayer with a height greater than 600px, as the video may not fit on users' screens.
Don’tDon't enable autoplay without first enabling the Muted option, to avoid startling users.
Don’tVideoPlayer: Displays videos uploaded directly to Bynder with essential playback controls like play, pause, and volume.
Don’tVideoPlayerYoutube: Embeds YouTube videos, leveraging YouTube’s native player and interface.
Don’tFor animated GIFs: Use the Picture component to display animated GIFs, as they do not require the functionality provided by a video player.
Don’t21 : 9
Don’t16 : 9
Don’t4 : 3
Don’t1 : 1
Don’t3 : 4
Don’t9 : 16

Content Guidelines

We use the video player to embed product explainers, tutorials, or promotional videos. We never rely on videos alone to explain important information. Key details also appear in text.

Voice and tone

We follow our general voice: simple, human, credible, like a knowledgeable friend.

  • We include a title or descriptive text adjacent to the video.
  • Titles reflect the video’s content or purpose.
  • For titles, we use sentence case.

Accessibility

We always provide captions for people with hearing impairments, non-native speakers, and those in noisy environments.