eui documentation
  1. Components
  2. EuiBannerVideoComponent

File

packages/components/eui-banner/eui-banner-video.component.ts

Description

Content projection component for embedding video content within eui-banner. Provides consistent styling and layout for video elements in banner contexts. Must be used as a child of eui-banner component with isVideoBanner enabled. Accepts any video-related content through content projection.

Example :
<eui-banner [isVideoBanner]="true" euiSizeL>
  <eui-banner-video>
    <video poster="thumbnail.jpg" autoplay loop muted>
      <source src="video.mp4" type="video/mp4">
    </video>
  </eui-banner-video>
  <eui-banner-title>Innovation in Action</eui-banner-title>
  <eui-banner-description>Watch our story unfold</eui-banner-description>
</eui-banner>

Accessibility

  • Video should include captions for users with hearing impairments
  • Provide poster image for video thumbnail
  • Use muted attribute for autoplay videos to comply with accessibility guidelines
  • Consider providing alternative text description of video content

Notes

  • Must be direct child of eui-banner component
  • Parent banner should have isVideoBanner set to true
  • Video element should include poster attribute for initial display
  • Use autoplay, loop, and muted attributes for background videos
  • Video is displayed as full-width background
  • Content (title, description) overlays the video
  • Consider video file size and format for performance

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-banner-video
template 
<ng-content/>
styleUrl ./eui-banner-video.scss

Index

Properties
HostBindings

HostBindings

class
Type : string
Default value : 'eui-banner-video'

Binds the class to the component.

Properties

string
Type : string
Default value : 'eui-banner-video'
Decorators :
@HostBinding('class')

Binds the class to the component.

results matching ""

    No results matching ""