### 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`
host | `{ }`
selector | `eui-banner-video`
template |
    <ng-content/>
styleUrl | `./eui-banner-video.scss`

# results matching ""

# No results matching ""