1. Components
  2. Media

Video hero

A more cinematic alternative to a traditional hero, employing video instead of static imagery.

Video hero orc-c-video-hero

A more cinematic alternative to a traditional hero, employing video instead of static imagery.

  • 

    <div class="orc-c-video-hero">
  <video class="orc-c-video " autoplay playsinline muted>

	<source class="orc-c-video__source" src="http:&#x2F;&#x2F;clips.vorwaerts-gmbh.de&#x2F;VfE_html5.mp4" type="video/mp4">

</video>
  <!-- end orc-c-video__video -->

  <div class="orc-c-video-hero__overlay"></div>
</div>

Usage

When to use

Use a video hero if and only if you have an extraordinary video to share. Videos should be part of a campaign or another high-priority content push.

When to consider an alternative

If the video isn’t extraordinary or if you don’t have a video at all, use a traditional hero.

Class Name Description 
orc-c-video-hero
Required

Apply to the video hero’s containing HTML element. This acts as a container for the video itself and the video overlay.

 
orc-c-video
Required

Apply to the video tag within orc-c-video-hero. This component has the ability to add/remove controls, autoplay, play inline, mute, and loop through via data attributes.

 
orc-c-video__source
Required

Apply to the source tag within the orc-c-video component. This contains the actual src of the video.

 
orc-c-video-hero__overlay
Required

Apply to empty div within the orc-c-video-hero to add the overlay effect on top of the video.