### 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

- string

###### HostBindings

- class

### 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 ""