# Video Header

WIP

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <header class="landing-page-header">
        <video class="bg-video" playsinline autoplay muted poster="../../assets/bg-images/edition-02/edition02-canyon-01.webp"">
            <source src=" ../../assets/bg-videos/neuroevolutionary-trails-2.webm" type="video/webm" />
        <source src="../../assets/bg-videos/neuroevolutionary-trails-2.mp4" type="video/mp4" />
        </video>
        <div class="landing-page-header__body">
            <div>
                <h1 class="landing-page-header__title bg-image-edition-01">Wir geben Technologie einen Sinn. <br />
                    Und Ihren Ideen eine Zukunft.</h1>
            </div>
            <div class="landing-page-header__text">
                Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich gern.
                Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und Geschäftsmodelle.
            </div>
        </div>
    </header>

`
`

    <header class="landing-page-header">
        <video class="bg-video" playsinline autoplay muted poster="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}"">
            <source src="{{ path '/assets/bg-videos/neuroevolutionary-trails-2.webm'}}" type="video/webm"/>
            <source src="{{ path '/assets/bg-videos/neuroevolutionary-trails-2.mp4'}}" type="video/mp4"/>
        </video>
        <div class="landing-page-header__body">
            <div>
                <h1 class="landing-page-header__title bg-image-edition-01">Wir geben Technologie einen Sinn. <br />
                    Und Ihren Ideen eine Zukunft.</h1>
            </div>
            <div class="landing-page-header__text">
                Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich gern.
                Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und Geschäftsmodelle.
            </div>
        </div>
    </header>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .bg-video {
        position: absolute;
        z-index: -100;
        inset: -100%;

        width: 100%;
        height: 100%;
        margin: auto;

        object-fit: cover;
      }

  `
- URL: /components/raw/video-header/_video-header.scss
- Filesystem Path: components/03-organisms/header/video-header/_video-header.scss
- Size: 139 Bytes

- Handle: @video-header
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/03-organisms/header/video-header/video-header.html

No notes defined.