Cover

Expand images or videos to cover their entire container.

This component allows you to create fullscreen teasers using images, objects or even iframes. Regardless what kind of element, it will always be centered vertically and horizontally and cover its container without losing its proportions.

You can use this component for responsive videos.

Usage

The Cover component is applied differently, depending on whether you are using a background image, an object or an iframe.

Background images

To make a background image cover it's container, use the modifier o-cover--bg.

<div class="o-cover o-cover--bg">...</div>

Videos

To make a video cover it's container, use the o-cover-object sub-element on the video tag.

<div class="o-cover">
  <video class="o-cover-object" width="" height="">
    <source src="" type="">
  </video>
</div>

Responsive video

Standard video

<div class="o-cover o-cover--video">
  <iframe class="o-cover-object" width="560" height="315" src="https://www.youtube.com/embed/1Tko1G6XRiQ" frameborder="0" allowfullscreen></iframe>
</div>

Widescreen video

<div class="o-cover o-cover--videoWide">
  <div class="o-cover-object">
    <iframe src="https://player.vimeo.com/video/67476280?color=9a151b&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

Ratio modifiers

16 x 9 (.o-cover--ratio16x9)

4 x 3 (.o-cover--ratio4x3)

21 x 9 (.o-cover--ratio21x9)

<div class="o-cover o-cover--bg o-cover--ratio16x9"></div>
<div class="o-cover o-cover--bg o-cover--ratio4x3"></div>
<div class="o-cover o-cover--bg o-cover--ratio21x9"></div>

Loading cover

This can be used with the Responsive image component when lazy loading images.

<div class="o-cover o-cover--ratio21x9 c-demo">
  {{ icon('spinner', 'o-Icon--spin o-icon--xl o-cover-loading') }}
</div>

Classes

Class	Description	Type
`.o-cover`	Sets overflow to hidden	Component
`.o-cover-object`	The element that has to cover the container.	Sub-element
`.o-cover-loading`	A spinning loading element	Sub-element
`.o-cover--bg`	Makes a background image cover the containing area	Component modifier
`.o-cover--video`	Sets the vertical padding on the containing element to 67.5% (youtube video) and makes the sub-element fit and maintain the aspect ratio	Component modifier
`.o-cover--videoWide`	As above but with a padding of 56.34% (vimeo videos).	Component modifier