Brand Design System

Video

Video player element supporting multiple sources including HTML5 video, YouTube, and Vimeo embeds with customizable playback controls.

Live Preview

Video Player Preview

1:23 / 4:56

Code

1<!-- HTML5 Video -->
2<video
3  class="video"
4  controls
5  poster="/video-poster.jpg"
6>
7  <source src="/video.mp4" type="video/mp4" />
8  <source src="/video.webm" type="video/webm" />
9  Your browser does not support the video tag.
10</video>
11

12<!-- YouTube Embed -->
13<div class="video-wrapper video-wrapper--16x9">
14  <iframe
15    src="https://www.youtube.com/embed/VIDEO_ID"
16    title="Video title"
17    frameborder="0"
18    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
19    allowfullscreen
20  ></iframe>
21</div>
22

23<!-- Vimeo Embed -->
24<div class="video-wrapper video-wrapper--16x9">
25  <iframe
26    src="https://player.vimeo.com/video/VIDEO_ID"
27    title="Video title"
28    frameborder="0"
29    allow="autoplay; fullscreen; picture-in-picture"
30    allowfullscreen
31  ></iframe>
32</div>

Brand Properties

Video Settings

PropertyTypeBrand DefaultHoB ValueTAE Value
Video SourceText input(empty)--
AutoplayCheckboxOff--
ControlsCheckboxOn--
LoopCheckboxOff--
MutedCheckboxOn--
Cover ImageText input(empty)--
Aspect RatioToggleOriginal--
Video WidthSlider500px--

Spacing & Layout

PropertyTypeBrand DefaultHoB ValueTAE Value
MarginsInput (px)0--
PaddingInput (px)0--

Styling

PropertyTypeBrand DefaultHoB ValueTAE Value
Corner RadiusInput (px)0sm=4px, md=8px, lg=12pxsm=4px, md=8px, lg=12px
Border StyleDropdownnone--
Border WidthInput0px--
Border ColorColor pickerrgb(0,0,0)--
OpacitySlider100%--
ShadowToggleOffsm, md, lgsm, md, lg

Content Section

PropertyTypeBrand DefaultHoB ValueTAE Value
Max WidthInput (px)1110--
MarginsInput (px)20--
PaddingInput (px)0--

Variants

Aspect Ratios

16:9
Standard (16:9)
4:3
Classic (4:3)
21:9
Ultrawide (21:9)

Custom Play Button

Video with Caption

Video Content

Learn how to apply Manjish Glow Elixir Face Oil for best results

Video Sources

YouTube

Supports standard YouTube URLs and embed URLs:

  • https://www.youtube.com/watch?v=VIDEO_ID
  • https://youtu.be/VIDEO_ID
  • https://www.youtube.com/embed/VIDEO_ID

Vimeo

Supports standard Vimeo URLs:

  • https://vimeo.com/VIDEO_ID
  • https://player.vimeo.com/video/VIDEO_ID

HTML5 Video

Supports common video formats:

  • MP4 (H.264) - Best compatibility
  • WebM - Modern browsers, smaller files
  • Ogg - Legacy support

Accessibility

  • Always provide a title attribute for iframe embeds
  • Include captions/subtitles for audio content
  • Avoid autoplay with audio (requires user interaction)
  • Provide transcript for important video content
  • Ensure controls are keyboard accessible
  • Don't rely on video alone for critical information

Do's and Don'ts

Do

  • Provide poster images for videos
  • Use appropriate aspect ratios
  • Include captions for accessibility
  • Optimize video files for web
  • Consider lazy loading for multiple videos

Don't

  • Autoplay with sound
  • Hide video controls
  • Use massive uncompressed videos
  • Forget about mobile data usage
  • Rely on video for critical content without alternatives

Unmapped Brand Values

The following brand values are available but not currently mapped to specific Video element properties:

HoB

CategoryTokenValue
Border Radiusradius-sm4px
Border Radiusradius-md8px
Border Radiusradius-lg12px
Shadowsshadow-smSmall shadow
Shadowsshadow-mdMedium shadow
Shadowsshadow-lgLarge shadow

TAE (The Ayurveda Experience)

CategoryTokenValue
Border Radiusradius-sm4px
Border Radiusradius-md8px
Border Radiusradius-lg12px
Shadowsshadow-smSmall shadow
Shadowsshadow-mdMedium shadow
Shadowsshadow-lgLarge shadow

Note: Neither HoB nor TAE brand guidelines include specific video styling tokens. The border radius and shadow tokens listed above can be applied to video containers when needed.

Related Elements