Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Video embed

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. Writing Content
  3. Responsive Design
  4. Best Practices
  1. Usage
  2. Writing Content
  3. Responsive Design
  4. Best Practices

Usage

The video embed element shows a static preview of the video, and this allows the user to control what image is seen before the video is played. It also ensures that the video does not start playing automatically.

Thumbnails

For users that do not have advertising cookies enabled, the video embed element should display a standard cookie consent thumbnail. This thumbnail includes instructions to enable advertising cookies and a button that will trigger a cookie consent dialog window.

Check the Code subpage for information about attributes and events that will help you implement the cookie consent thumbnail and integrate it with the preferred cookie consent manager. View the Require Consent demo to see a standalone implementation of this functionality.

Video displaying the cookie consent which says, 'View this video by opting into Advertising Cookies.' It also has an 'Update Preferences button'.

Writing Content

Character Count

An optional descriptor caption can be placed underneath the video embed element. The recommended maximum character count is listed below and includes spaces.

Element Character count
Caption 150

Responsive Design

The video’s width will dynamically adjust with its parent container. The video embed element dimensions should retain the same aspect ratio as the original video. The caption font size will also remain the same across all screen or container sizes.

Large Viewport Sizes

Video embed with a semitransparent grid in the background. The video embed only spans half the columns.

Small Viewport sizes

Video embed with a semitransparent grid background on mobile. The video embed spans all columns on small viewports.

Best Practices

Play button

Display the play button in a consistent, predictable spot for all videos.

Video with vertically and horizontally centered play button

Keep the play button centered horizontally and vertically.

Video with play button in the bottom right

Do not move the play button to another area of the video element.

Aspect Ratio

A video embed element and should have the same aspect ratio as the video it’s displaying.

Video embed with a correct, 16:9 aspect ratio

The video embed element should display a video using its original aspect ratio.

Video embed with a very narrow aspect ratio

Do not change the aspect ratio of the video within the video embed element.

© 2021-2024 Red Hat, Inc. Deploys by Netlify